```html

**<!-- 省市联动

思路分析：

1.准备元素：定义省份与城市的下拉框

2.绑定事件：绑定省份下拉框的change事件

3.准备数据：准备数组存放省份信息,定义二维数组存放城市数据

4.初始化数据：将数组中的省份数据填充到省份下拉框中

5.下拉框change事件：根据选中的省份数据，得到对应的二维数组中的城市数据，并填充到城市下拉框中

创建文本节点 createTextNode()

创建元素 createElement()

追加子元素 appendChild()

实现步骤

1.定义省份与城市下拉框的元素

2.定义省份与城市下拉框所需要的数据（数组与二维数组）

3.填充省份下拉框的数据

3.绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应

5.通过选中的值(索引) 获取二维数组中对应的数组

6.清空城市下拉框的选中

7.遍历城市数组的数据，填充城市下拉框的值

8.创建元素节点，创建文本节点，将文本节点追加到元素节点中

9.将元素节点追加到城市下拉框中

-->

<!-- 首先我们先写好页面的布局 -->

<div align="center">

城市：

<select id="pro">

<option value="">请选择</option>

</select>

<select id="city">

<option value="">请选择</option>

</select>

</div>

```

```javascript

<!-- 我们这里使用两种写法，一种是js写法，另一种是jQuery写法 -->

<script>

// 2.定义省份与城市下拉框所需要的数据（数组与二维数组）

//省份所需要的数据

var proList = ["北京","山西","山东","河北","河南"];

//城市下拉框所需要的数据

var cityList = [

["东城区","西城区","朝阳区","海淀区","昌平区"],

["太原市","大同市","临汾市","晋中市"],

["济南市","青岛市","运城市","烟台市","临沂市"],

["石家庄","邢台市","保定市","海淀区"],

["郑州市","南阳市","焦作市","信阳市"]

];

// 3.填充省份下拉框的数据

for(var i=0;i<proList.length;i++){

//创建元素节点

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

//创建文本节点

var txt = document.createTextNode(proList[i]);

//向option元素中追加文本节点

opt.appendChild(txt)

//设置下拉框对应的value属性

opt.value = i;

//将option元素追加到省份下拉框中

document.getElementById("pro").appendChild(opt);

}

//绑定省份下拉框的change事件：当下拉框的选项发生改变时执行的事件

// 4.绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应

document.getElementById("pro").onchange = function(){

//清空城市下拉框中的数据

document.getElementById("city").options.length = 0;

//获取下拉框被选中的值

var index = document.getElementById("pro").value;

//判断是否选中了指定的省份（index值不为空）

if(index == ""){

//未选中省份，则设置城市为默认的请选择

document.getElementById("city").innerHTML = ' <option value="">请选择</option>';

return;

}

//获取对应城市二维数组中对应的数组

var citys = cityList[index];

//遍历城市数组

for(var i=0;i<citys.length;i++){

//创建元素节点

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

//创建文本节点

var txt = document.createTextNode(citys[i]);

//向option元素中追加文本节点

opt.appendChild(txt)

//将option元素追加到省份下拉框中

document.getElementById("city").appendChild(opt);

}

}

</script>

```

第二种写法jQuery，提示:使用jQuery写法，要使用jquery.js

```javascript

<script>

//jquery写法

//省份所需要的数据

var proList = ["北京","山西","山东","河北","河南"];

//城市下拉框所需要的数据

var cityList = [

["东城区","西城区","朝阳区","海淀区","昌平区"],

["太原市","大同市","临汾市","晋中市"],

["济南市","青岛市","运城市","烟台市","临沂市"],

["石家庄","邢台市","保定市","海淀区"],

["郑州市","南阳市","焦作市","信阳市"]

];

// 加载省份，填充省份下拉框的数据

for (var i =0;i<proList.length;i++){

//定义下拉选项

var opt = $("<option value='"+i+"'>"+proList[i]+"</option>");

//将下拉选项追加到省份下拉框中

$("#pro").append(opt);

}

//给省份下拉框绑定change事件

$("#pro").change(function(){

//得到当前下拉框被选中项的值

var index = $(this).val();

//得到被选中的省份对应的城市(二维数组)

var citys = cityList[index];

//移除城市下拉框中本有的下拉选项(保留第一个选项)

$("#city option:gt(0)").remove();

//加载城市下拉框

for(var i=0;i < citys.length;i++){

var opt = $("<option value='"+i+"'>"+citys[i]+"</option>");

//将下拉选项追加到省份下拉框中

$("#city").append(opt);

}

})

</script>

```

这样省市联动就完成了。

## 省市联动总结

1.总的来说两种方法都可以实现，但是这两种方法我们都需要学会

虽然说jQuery方法实现比较简单一些，但js也尤其重要

2. 绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应

3.通过选中的值(索引) 获取二维数组中对应的数组

4.清空城市下拉框的选中

5.遍历城市数组的数据，填充城市下拉框的值

6.创建元素节点，创建文本节点，将文本节点追加到元素节点中

7.将元素节点追加到城市下拉框中

8.我们要了解其中的思路，多敲，多思考。