JS实现省市联动

编写html文档，创建两个下拉选择框，一个表示省份名，一个表示城市名，用id选择器，添加改变事件。

<select id="province" onchange="fillCity()"></select> //省
<select id="city"></select>// 市

使用数组存储信息(文字作为数组下标)

var arr = new Array();
        arr["湖南"] = ["常德", "衡阳", "益阳", "株洲","邵阳","岳阳","郴州"];
        arr["广东"] = ["东莞", "深圳", "广州","河源" ];
        arr["湖北"] = ["荆州", "武汉", "随州", "宜昌"];
        arr["吉林"] = ["长春", "辽源", "白化"];

声明函数initData()，在第一个下拉框填充所有的省。

 function initData(){ // 初始化
            var province = document.getElementById("province"); // 通过id获取到省
            for(var i in arr){ //迭代文字下标
                var  option = document.createElement("option"); // 在select中创建option节点
                option.text  = i;
                option.value = i;
                province.options.add(option);
            }
        }

4.声明函数fillCity()，将在第一个下拉框选择的省对应的市填充到第二个下拉框中。

 function fillCity(){
            var city = document.getElementById("city");
            city.options.length = 0; // 清除列表项
            var provinceDep = document.getElementById("province").value;//获取省名
            for(var  index  in  arr[provinceDep]){
                var option = document.createElement("option"); // 创建节点
                option.text = arr[provinceDep][index];
                option.value = arr[provinceDep][index];
                city.options.add(option);
            }
        }

最后为body标签加上onload事件并绑定initData()方法和fillCity()方法。

JS实现省市联动

推荐阅读更多精彩内容