javascript之级联列表+图片（以省市为例）

编程小小小小小白白

于 2022-05-01 16:14:31 发布

阅读量635

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_67932301/article/details/124528002

版权

步骤和代码都在以下代码段中

<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>