二级连动菜单

最新推荐文章于 2021-12-03 22:37:01 发布

9Khan

最新推荐文章于 2021-12-03 22:37:01 发布

阅读量73

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_45943458/article/details/103832325

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="sheng" onchange="func1(this)"></select>
<select id="shi"></select>

</body>
<script>
    data={"内蒙":["满洲里","海拉尔"],"北京":["朝阳区","海淀区"],"山东":["青岛","济南","青岛"]};

    var pro=document.getElementById("sheng");
    var shi=document.getElementById("shi");

    for (var i in data){
        var option_pro=document.createElement("option") ;//建立一个空的option标签
        option_pro.innerHTML=i; //把省份内容，给option标签
        pro.appendChild(option_pro); // 把全部内容加到select中
    }
    function func1(f) {
     var choice=(f.options[f.selectedIndex]).innerHTML;
    //----------------下面是初始化，删除BUG
    // var optinons=shi.children; //拿到 shi下的所有孩子 <option></option>
    // for (var k in optinons){
    //     shi.remove(optinons[k]);
    // }
    //-----------------------------------------------

        shi.options.length=0; //初始化，删除BUG
     for ( var i in data[choice]){
         var option_pro=document.createElement("option") ;
         option_pro.innerHTML=data[choice][i]; //data["内蒙"][0,1,2,3]
         shi.appendChild(option_pro);

     }



   }


</script>
</html>

9Khan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级连动菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><select id="sheng" onchange="func1(this)"&...
复制链接

扫一扫