4.6JavaScript --练习两级联动

最新推荐文章于 2022-07-22 17:20:02 发布

寒暄

最新推荐文章于 2022-07-22 17:20:02 发布

阅读量98

点赞数

分类专栏： ▶寒暄_前端

本文链接：https://blog.csdn.net/qq_41106844/article/details/105554045

版权

▶寒暄_前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

总目录：https://www.jianshu.com/p/8b3e5b2b4497

前端 - 子目录：https://www.jianshu.com/p/6fdb59d92e43

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两级联动</title>
</head>
<body>

<select id="province">
    <option>请选择省:</option>
</select>

<select id="city">
    <option>请选择市:</option>
</select>


<script>
    data={"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]};


      var p=document.getElementById("province");
      var c=document.getElementById("city");

    for(var i in data){
        var option_pro=document.createElement("option");
        option_pro.innerHTML=i;
        p.appendChild(option_pro);
        /*解读：
            读取字典的key值，然后构成<option>标签，添加到第一个select内。
        */
    }
     p.onchange=function(){
    /*解读：
        当域的范围发生改变，就是当再次选择省市时，对二级标签内容重新读取。
    */
            pro=(this.options[this.selectedIndex]).innerHTML;
            citys=data[pro];
    //pro是改变后的一级标签内容，citys保存对应的二级标签内容。

         c.options.length=0;

         for (var i in citys){
             var option_city=document.createElement("option");
             option_city.innerHTML=citys[i];
             c.appendChild(option_city);
             /*解读：
                读取一级标签对应的二级标签内容，构成<option>标签内容，添加到第二个select内。
             */
         }

     }
</script>
</body>
</html>

寒暄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
4.6JavaScript --练习两级联动

总目录：https://www.jianshu.com/p/8b3e5b2b4497前端 - 子目录：https://www.jianshu.com/p/6fdb59d92e43<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...
复制链接

扫一扫