Heim > Artikel > Web-Frontend > Einfache Implementierung einer dreistufigen Verknüpfung mithilfe von JavaScript

Einfache Implementierung einer dreistufigen Verknüpfung mithilfe von JavaScript

韦小宝Original: 2018-03-10 11:55:063835Durchsuche

In der tatsächlichen JavaScript-Projektentwicklung benötigen wir häufig eine dreistufige Verknüpfung, z. B. die Auswahl von Provinzen und Gemeinden, die Auswahl der dreistufigen Warenklassifizierung usw. Heute erklären wir, wie JavaScript die dreistufige Verknüpfung implementiert, und teilen den JavaScript-Quellcode mit Ihnen! Wenn Sie mit JavaScript zur Implementierung der Drei-Ebenen-Verknüpfung nicht vertraut sind, können Sie bei uns einen Blick darauf werfen!

Wissenspunkte:

1. json.parse() konvertiert den JSON-Format String in Object. json.stringify() konvertiert das Objekt in einen String im JSON-Format.

2. Wichtiges Attribut selectedIndex: Gibt die Indexnummer der ausgewählten Option der Dropdown-Liste zurück.

3. onchangeEreignis

Das Folgende ist der 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>

Sie kann es kombinieren Schauen Sie sich den Quellcode und die Wissenspunkte an! Versuchen Sie es selbst zu schreiben und stärken Sie Ihr Wissen!

Verwandte Empfehlungen:

js realisiert die gemeinsame Nutzung von dreistufigen Verknüpfungs-Plug-Ins für Provinzen und Gemeinden

So implementieren Sie den dreistufigen Verknüpfungseffekt von jQuery

Das obige ist der detaillierte Inhalt vonEinfache Implementierung einer dreistufigen Verknüpfung mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Berechnete Eigenschaften und Listener-Anwendungsfälle für VUENächster Artikel：Berechnete Eigenschaften und Listener-Anwendungsfälle für VUE

In Verbindung stehende Artikel

Mehr sehen