用原生JS写省市二级联动

HTML代码

~请选择省份~ 湖北省 江西省 ~请选择城市~

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);
}
}
}
}
}