Maison >interface Web >js tutoriel >Implémentation simple d'une liaison à trois niveaux à l'aide de JavaScript

Implémentation simple d'une liaison à trois niveaux à l'aide de JavaScript

韦小宝original: 2018-03-10 11:55:063862parcourir

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Propriétés calculées et cas d'utilisation des écouteurs pour VUEArticle suivant：Propriétés calculées et cas d'utilisation des écouteurs pour VUE

Articles Liés

Voir plus