仿二级联动

最新推荐文章于 2024-02-21 22:04:37 发布

人终将被少年不得之物困扰一生

最新推荐文章于 2024-02-21 22:04:37 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/weixin_43889484/article/details/104032777

版权

<body>
    <select id="province" >
        <option>请选择省份</option>
    </select>
    <select id="city">
        <option>请选择城市</option>
    </select>
</body>
<script>
    data = {"四川":["成都","乐山","资阳"],"浙江":["杭州","宁波"], "山东":["济南","烟台"]};
    var pro  = document.getElementById("province");
    var city = document.getElementById("city");

    for(var i in data){
        var pro_option=document.createElement('option');
        pro_option.innerHTML=i;
        pro.appendChild(pro_option);
    }
    pro.onchange=function(){
        //console((this.options[this.selectedIndex]).innerHTML)
        var choice=(this.options[this.selectedIndex]).innerHTML

        city.options.length=1;
        for(var i in data[choice]){
            var city_option=document.createElement('option');
            city_option.innerHTML=data[choice][i];
            city.appendChild(city_option);
        }
    }
</script>

仅供参考，比较适合入门。。