使用JavaScript简单实现三级联动

来源：宝玛科技网

在实际的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简单实现三级联动