1.什么是省市联动？
其实在我们的日常生活中有许多省市联动的例子，省市联动主要是应用在表单项中，也就是注册时的资料填写列。当我们在填写自己的住址时，一般会有一个下拉列表当我们点击下拉框中的省份时，后一个下拉框就会出现你所选择的省份的下级城市。这就是我们所说的省市联动。
2.如何实现省市联动？
-
那么我们要怎样实现这个功能呢？其实很简单。首先我们要先要创建两个select表单。<body>中的内容如下：
...<select onchange="selectCity(this.value)"> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select>
...
- 接下来我们就要开始Javascript部分的代码编写了，我们首先定义一个数组用来存贮城市信息：
...
var cities = new Array(4);//定义一个数组存储城市
cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
cities[1] = new Array("长沙市", "株洲市", "岳阳市","邵阳市");
cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
cities[3] = new Array("安阳市", "洛阳市", "开封市", "安阳市");
...
- 我们在之前的第一个select标签中定义了一个点击事件的方法，我们现在开始编写方法部分：
...
function selectCity(value) {
//获取第二个下拉框
var cityEle = document.getElementById("city");
//清空第二个下拉框的内容
cityEle.options.length = 0;
//遍历二维数组中的省份
for (var i = 0; i < cities.length; i++) {
//判断遍历用户选择的省份下的城市
if (value == i) {
for (var j = 0; j < cities[i].length; j++) {
var textNode = document.createTextNode(cities[i][j]);
var opEle = document.createElement('option');
opEle.appendChild(textNode);
//将option添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
...
-
这样我们的代码就编写完毕了，让我们来看看最终的成果吧：
捕获.PNG 当我们点击湖南省，再点击后面的下拉框时，该下拉框就会显示出湖南省的下级城市。点击其他省份也是一样的效果，会根据你点击的省份显示不同城市，这就是我们所说的省市级联效果啦。
-
结语：长路漫漫，唯键作伴。希望这篇文章对你有所帮助，感谢您的阅读。
