Maison > Article > interface Web > Implémentation simple d'une liaison à trois niveaux à l'aide de JavaScript
Dans le développement réel de projets JavaScript, nous avons souvent besoin d'un lien à trois niveaux, comme la sélection des provinces et des municipalités, la sélection d'une classification des marchandises à trois niveaux, etc. Aujourd'hui, nous allons expliquer comment JavaScript implémente la liaison à trois niveaux et partager le code source JavaScript avec vous ! Si vous n'êtes pas familier avec JavaScript pour implémenter des liens à trois niveaux, vous pouvez jeter un œil avec nous !
Points de connaissance :
1. json.parse() convertit le format json chaîne en objet. json.stringify() convertit l'objet en chaîne au format json.
2. Attribut important selectedIndex : Renvoie le numéro d'index de l'option sélectionnée de la liste déroulante .
3. Événement onchange
Voici le code :
<!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>
Vous peut le combiner Jetez un œil au code source et aux points de connaissances ! Essayez de l'écrire vous-même et renforcez vos connaissances !
Recommandations associées :
js réalise le partage de plug-ins de liaison à trois niveaux pour les provinces et les municipalités
Comment implémenter l'effet de liaison à trois niveaux jQuery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!