使用JavaScript简单实现三级联动
- 韦小宝原创
- 2018-03-10 11:55:063845浏览
在实际的JavaScript项目开发中，我们经常需要三级联动，比如省市区的选择，商品的三级分类的选择等等。我们今天就来讲解一下JavaScript实现三级联动，还有JavaScript源码分享给大家哦！不太熟悉JavaScript实现三级联动的可以和我们一起看看！
知识点：
1. json.parse() 将json格式字符串转换成对象。json.stringify()将对象转换成json格式字符串。
2. 重要属性selectedIndex：返回下拉列表的被选选项的索引号。
3. onchange事件
下面是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select id="province">
<!-- <option>北京</option>
<option>天津</option> -->
</select>
<select id="city"></select>
<select id="count"></select>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript">
var province = document.getElementById("province");
var city = document.getElementById("city");
var count = document.getElementById("count");
var chinaArea = JSON.parse(chinaArea);//将字符串格式的json数据转换成对象
// var chinaArea = eval("("+chinaArea+")");
// var chinaArea = new Function("return " + chinaArea)();
//1.遍历省份
var provinceList = chinaArea.china.province;//数组
for(var i = 0 ; i < provinceList.length; i++) {
var option = document.createElement("option");
option.innerHTML = provinceList[i]["-name"];
province.appendChild(option);
}
province.onchange = function() {
//选择省份之后，市区跟着变化
cityData();
countData();
}
cityData();
//市区的数据填充
var sIndex = 0;
var cityIndex = 0;
function cityData() {
//清除原来的市区信息
city.innerHTML = "";
//2.遍历市区
sIndex = province.selectedIndex;//设置或返回下拉列表备选选项的索引号。
for(var j = 0; j < provinceList[sIndex].city.length;j++) {
var option = document.createElement("option");
option.innerHTML = provinceList[sIndex].city[j]["-name"];
city.appendChild(option);
}
}
//县区数据填充
function countData() {
//清除原来的县区信息
count.innerHTML = "";
//
cityIndex = city.selectedIndex;
var countList = chinaArea.china.province[sIndex].city[cityIndex].county;
for(var k = 0; k < countList.length; k++) {
var option = document.createElement("option");
option.innerHTML = countList[k]["-name"];
count.appendChild(option);
}
}
city.onchange = function() {
countData();
}
countData();
</script>
</body>
</html>大家可以结合源码和知识点看看！尝试着自己写写，加强一下自己的知识面！
相关推荐：
以上是使用JavaScript简单实现三级联动的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn