步骤和代码都在以下代码段中
<body>
<select id="sf"></select>
<select id="sl2"></select>
<img src="" id="img">
<script>
var provice =["河北","河南","湖北"]//定义一个放置省份的数组
//将省份数组拼接成option标签，放入第一个select标签中//
var str=""
for(var n=0;n<provice.length;n++){
str=str+"<option>"+provice[n]+"</option>"
}
var sf=document.getElementById("sf")
//3.将拼接好的str字符串放入第一个select标签中
sf.innerHTML=str
//4.定义一个放置市的数组这需要用到二维数组
var citys=[["沧州","石家庄"],["开封","洛阳"],["武汉","荆州"]]
//5.定义一个防止图片的数组(数组里写的是路径)
var img=[["images/cz.jpg","images/sjz.jpg"],["images/kf.jpg","images/ly.jpg"],["images/wh.jpg","images/jz.jpg"]]
//6.由于默认的第一个是河北，第二个框中默认的是河北省的市所以要小于city[0]的长度
var str2=""
for(var n=0;n<city[0].length;n++){
str2=str2+"<option>"+city[0][n]+"</option>"
}
//将拼接好的放入第二个select标签中
var sl2=document.getElementById("sl2")
sl2.innerHTML=str1
//7.将图片默认显示第一个的位置
var img=document.getElementById("img")
img.src=img[0][0]
//当左侧select内容放生变化，右边的也随之发生变化//
sl1.onchange=function(){
//找到数组变化的位置//
var index=sl1.selectedIndex
//遍历数组//
var str1=""
for(var n=0;n<citys[index].length;n++){
str1=str1+"<option>"+citys[index][n]+"</option>"
}
//第二个框的内容随之变化//
sl2.innerHTML=str1
//改变到指定图片，每次切换时永远显示第一张图片，那么将地址换成数组中的第一项
var img=document.getElementById("img")
img.src=img[index][0]
}
//当右侧的select发生变化时，图片也随之变化
sl2.onchange=function(){
//找到图片对应的位置
var index1=sl2.selectedIndex
var index =sl1.selectedIndex
var img=document.getElementById("img")
img.src=img[imdex1][index]
}
</script>
</body>
