HTML实现一个省对应多个城市,用JS实现简单的省市联动

用JS实现简单的省市联动

技术分析：

使用 javascript 实现城市二级联动(onchange() 当下拉框变化时触发事件 createTextNode() 方法和 createElement() 方法以及 appendChild() 方法)。

代码步骤：

1、首先确定事件为 onchange() 事件,并为该事件绑定一个函数。书写该函数。

2、创建一个二维数组。

3、在判断用户选择的是哪一个省份。

4、获取该省份下的城市。

5、创建文本节点和元素节点，将文本节点添加到元素节点中。

6、获取第二个下拉框元素并把元素节点添加到第二个下拉框中。7、清除第二个下拉框(如果不清除，就会有上一次的遗留)。效果图如下：

源代码如下：

省市联动

请选择

湖北省

湖南省

广东省

请选择

// 创建一个二维的数组，用来存储各个省份对应的城市

var cities = new Array();

cities[0] = new Array("武汉市","黄冈市","荆州市","仙桃市","黄石市","宜昌市");

cities[1] = new Array("长沙市","湘潭市","株洲市","衡阳市","岳阳市","郴州市");

cities[2] = new Array("广州市","珠海市","深圳市","东莞市","佛山市","茂名市");

function changeCity() {

// 获取省份的下拉框

var pro = document.getElementById("province");

// 获取城市下拉框

var city = document.getElementById("city");

// 获取你点击的省的value

var val = pro.value;

val = val - 1;

// 清空城市下拉框里面的城市

city.options.length = 1; //因为每次选新的省份，上次选的省份的城市也会出现，所以新添之前清空即可

// 遍历所有城市

for(var i=0;i

// 匹配省份对应的城市

if(val == i){

// 遍历用户选择的省份的城市 广东省这个里面的文本内容就称为文本节点。

for(var j=0;j

// 创建城市的文本节点

var text = document.createTextNode(cities[i][j]);

// 创建元素节点

var opt = document.createElement("option");

// 将城市的文本节点添加到option元素节点里面

opt.appendChild(text) ; //在option标签里添加一个子节点，子节点里放文本

// 将添加了文本内容的option标签放在上面城市下拉框里面

city.appendChild(opt); //在城市下拉框里添加子节点，里面放option标签

}

}

}

}