用原生JS写省市二级联动

2019-08-14 10:29:09来源:博客园 阅读 ()

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

原文链接:https://www.cnblogs.com/yws344719729/p/11314921.html
如有疑问请与原作者联系

标签:HTMLem代码function选择数组

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue+element项目中过滤输入框特殊字符小结

下一篇:new Date,Date.parse()传值