js练习——省市级联

最新推荐文章于 2020-06-28 11:16:47 发布

Milena516

最新推荐文章于 2020-06-28 11:16:47 发布

阅读量359

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43777157/article/details/106313231

版权

js练习小案例——省市级联

本案例举出两种实现方式

最易懂的方法
使用switch语句判断，省份增多，该方法实现的代码就会更长出现冗余。

<body>
    <select id="province" onchange="change()">
        <option>请选择</option>
        <option>辽宁省</option>
        <option>陕西省</option>
        <option>吉林省</option>
    </select>
    <select id="city">
        <option>请选择</option>
    </select>
</body>

<script>
    function change(){
        var province = document.getElementById("province").value;
        // alert(province.value);
        var city = document.getElementById("city");
        var cities;
        switch(province){
            case "辽宁省":
                cities = new Array("沈阳市","大连市","盘锦市","锦州市","丹东市");
                break;
            case "陕西省":
                cities = new Array("西安市","咸阳市","宝鸡市","渭南市");
                break;
            case "吉林省":
                cities = new Array("吉林市","长春市","通化市","松原市");
            break;
        }
        city.length = cities.length;
        for(var i=0; i<cities.length; i++){
            //    获取select对象中option对象的集合
            city.options[i] = new Option(cities[i]);
        }
    }
</script>

动态加载
将省市存到二维数组中

<select id="province" onchange="loadCitys()">
    <option>请选择</option>
</select>
<select id="city">
    <option>请选择</option>
</select>

<script>
    var cityList = new Array();
    cityList['辽宁省'] = ['沈阳市','大连市','盘锦市','锦州市','丹东市'];
    cityList['陕西省'] = ['西安市','咸阳市','宝鸡市','渭南市'];
    cityList['吉林省'] = ['吉林市','长春市','通化市','松原市'];
    function loadProvince(){
        var province = document.getElementById("province");
        for(var pro in cityList){
            // add方法向option集合中添加元素
            // new Option("文本","值")
            province.add(new Option(pro,pro));
        }
    }
    window.onload=loadProvince;
    function loadCitys(){
        var province = document.getElementById("province").value;
        var city = document.getElementById("city");
        city.options.length = 0;//清空city下拉框中的内容
        for(var pro in cityList) {
            if (pro == province) {
                for(var citys in cityList[pro]) {
                    city.add(new Option(cityList[pro][citys],cityList[pro][citys]));
                }
            }
        }
    }
}