用JavaScript写一个简单的二级联动菜单

二级联动菜单指的是当后一个下拉菜单的下拉列表随着前一个下拉菜单的下拉列表选中的内容的变化而变化，这被应用在很多地方，比如填写表单时的省份和城市。

现在我们做一个简单的实现。

1.用JavaScript实现

思路：给前一个下拉菜单绑定一个onchange事件，当事件发生时，在省份数组里寻找当前的val，根据val的索引值来确定在后一个下拉菜单中要渲染的下拉菜单列表。然后在删除下一个下拉菜单列表的子元素，之后动态生成n个select数组，并给它设置相应的value值和innerText值。

2.代码实现：

<script>
//一个二级联动菜单，当前一个下拉菜单里的值变化时，后一个下拉菜单里的值整体也发生改变。
var province = ["陕西","江苏","山东"];
var city = [["西安市","渭南市","咸阳市","汉中市"],
["南京市","苏州市","徐州市","杭州市"],
["青岛市","济南市","烟台市","淄博市"],
];
var oPro = document.getElementById('province');
var oCity = document.getElementById('city');
var oCitys = oCity.getElementsByTagName('option');
//当省份改变时
oPro.onchange = function(){
//在定义省份的一维数组里找到它的索引
var oVal = this.value;
var index = province.indexOf(oVal);
var newArr = city[index];
//清空城市下拉菜单里的值
while(oCity.firstChild){
oCity.removeChild(oCity.firstChild);
}
//根据省份的不同渲染不同的城市数组
for(var i = 0;i<newArr.length;i++){
var opt = document.createElement('option');
opt.setAttribute('value',newArr[i]);
opt.innerText = newArr[i];
oCity.appendChild(opt);
}
}
</script>

3.用到的DOM方法

常见的操作DOM节点的方法：createElement（），appendChild()，removeChild（），

setAttribute()，innerText，firstChild等

参考：http://harttle.com/2015/10/01/javascript-dom-api.html