用原生JS写省市二级联动

HTML代码

<select id="s1">
<option value="0">~请选择省份~</option>
<option value="1">湖北省</option>
<option value="2">江西省</option>
</select>
<select name="" id="city">
<option value="0">~请选择城市~</option>
</select>
 
 
 
 
JS代码
 
window.onload = function () {
//创建一个二维数组,存储城市
var arrCity = [["~请选择城市~"],[ "武汉市", "黄冈市", "襄阳市"], ["南昌市", "景德镇", "九江市"]];
//给省份绑定onchange时间
s1.onchange = function () {
//1.获取你选择省份的value属性
var val = document.getElementById("s1").value;
//7.获取城市的元素节点
var city = document.getElementById("city");
//9.每次触发onchang时间后将清空第二个下拉框的option内容
city.innerHTML = "";
//2.遍历二维数组中的省份
for (var i = 0; i < arrCity.length; i++) {
//注意,比较的是角标
if(val == i){
//3.遍历选择省份下的城市
for(var j=0;j<arrCity[i].length;j++){
//4.添加option元素节点
var option = document.createElement("option");
//5.添加文本节点
var textNode = document.createTextNode(arrCity[i][j]);
//6.将文本节点添加到option元素节点中
option.appendChild(textNode);
//8.将元素节点添加到城市的元素节点下
city.appendChild(option);
}
}
}
}
}
上一篇:2018.4.27 java容器


下一篇:xml+js+html的二级联动