在實際的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中文網其他相關文章!