JS练习之二级联动

2019-06-30 11:02:04 阅读：166 来源： 互联网

标签：console log 练习 JS 联动 var ele data name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select id="provinces">
    <option value="">请选择省份</option>
    <!--<option value="">河北省</option>-->
    <!--<option value="">河南省</option>-->
    <!--<option value="">北京</option>-->
</select>

<select name="" id="citys">
    <option value="">请选择城市</option>
</select>



<script>

//    a={name:"alex"};
//    b={"name":"alex"};
//    console.log(a.name);
//    console.log(b["name"]);

//      data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
//    console.log(data);
//    console.log(typeof data);
//    console.log(data["河北省"]);
//    console.log(data.河北省);
//
//      for (var i in data){
//          console.log(i);
//      }


    data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
    var pro_ele=document.getElementById("provinces");
    var city_ele=document.getElementById("citys")

    for(var i in data){
        var ele=document.createElement("option");
        ele.innerHTML=i;
        pro_ele.appendChild(ele)
    }

    pro_ele.onchange=function () {
        console.log(this.selectedIndex);
        console.log(this.options[this.selectedIndex])

        var citys=data[this.options[this.selectedIndex].innerHTML];

        city_ele.options.length=1;

        for(var i=0;i<citys.length;i++){
            var ele=document.createElement("option");
             ele.innerHTML=citys[i];
            city_ele.appendChild(ele)
        }

    }



</script>


</body>
</html>

View Code

标签：console,log,练习,JS,联动,var,ele,data,name
来源： https://www.cnblogs.com/jintian/p/11108994.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS练习之二级联动