用原生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);

}

}

}

}

}