<!-- 省市联动
思路剖析：
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.我们要理解个中的思路，多敲，多思考。
