Heim > Artikel > Web-Frontend > So steuern Sie die sekundäre Verknüpfung mit JS

So steuern Sie die sekundäre Verknüpfung mit JS

小云云Original: 2018-03-12 16:13:331895Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie die sekundäre Verknüpfung mit JS steuern. Auf der Registrierungsseite gibt es eine Dropdown-Liste, und es gibt eine weitere Liste Provinz und fügen Sie die Städte unter dieser Provinz hinzu. Ich hoffe, dieser Artikel kann allen helfen.

1. Anforderungen

Auf der Registrierungsseite gibt es eine Dropdown-Liste, in der die Provinzinformationen angezeigt werden. Außerdem gibt es eine weitere Liste die Städte unter dieser Provinz.

2. Technische Analyse

Array

Syntax:

new Array();//长度为0
new Array(size);//指定长度的
new Array(e1,e2..);//指定元素
非官方
    var arr4=["aa","bb"];

Gemeinsame Attribute:
```
length
```

Hinweis:

数组是可变的
数组可以存放任意值

Gemeinsame Methoden: (verstehen)

存放值:对内容的操作
    pop():弹 最后一个
    push():插入 到最后
    shift():删除第一个
    unshift():插入到首位
打印数组:
    join(分隔符):将数组里的元素按照指定的分隔符打印
拼接数组:
    concat():连接两个或更多的数组，并返回结果。
对结构的操作:
    sort();排序
    reverse();反转

3. Schrittanalyse

Schritt 1: Bestimmen Sie das Ereignis: onchange>Schritt 2: Ermitteln Sie den geänderten Provinzwert.
Schritt 3: Vergleichen Sie, ob der Wert der Provinz gleich ist Im Array definierter Wert. Wenn er gleich ist, wird das Array aller Städte abgerufen, die dieser Provinz entsprechen.
Schritt 4: Erstellen Sie ein Optionselement und fügen Sie den Wert im Array zum Optionselement hinzu.
Schritt 5: Option zur zweiten Dropdown-Liste hinzufügen.

4. Code-Implementierung

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            // 定义二维数组:
            var cities = new Array(4);
            cities[0] = new Array("长春市","吉林市","松原市","延边市");
            cities[1] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
            cities[2] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
            cities[3] = new Array("南京市","苏州市","扬州市","无锡市");            function selectCity(val){
                // alert(val);
                var citySel = document.getElementById("city");                // 清除原有的option:
                citySel.options.length = 0;                // 遍历数组：
                for(var i=0;i<cities.length;i++){                    if(val == i){                        // 遍历数组：
                        for(var j = 0 ;j<cities[i].length;j++){                            // alert(cities[i][j]);
                            // 创建option元素：
                            var opEl = document.createElement("option");                            // 创建文本元素：
                            var textNo = document.createTextNode(cities[i][j]);                            // 将文本添加到option中．
                            opEl.appendChild(textNo);                            // 将option添加到第二个下拉列表中
                            citySel.appendChild(opEl);
                        }
                    }
                }
            }        </script>
    </head>
    <body>
        <select id="province" onchange="selectCity(this.value)">
            <option value="">-请选择-</option>
            <option value="0">吉林省</option>
            <option value="1">山东省</option>
            <option value="2">河北省</option>
            <option value="3">江苏省</option>
        </select>
        <select id="city">
        </select>
    </body></html>

5. Implementierungseffekt

So steuern Sie die sekundäre Verknüpfung mit JS

Anfänger, ich hoffe, jeder kann eine Nachricht hinterlassen, um mich zu korrigieren.

Verwandte Empfehlungen:

js-Implementierung der gemeinsamen Nutzung sekundärer Verknüpfungsinstanzen in HTML

Realisierung der sekundären jq-Verknüpfung auf der Registrierungsseite

Native js sekundäre Verknüpfung

Das obige ist der detaillierte Inhalt vonSo steuern Sie die sekundäre Verknüpfung mit JS. 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：js-Anker-Scrolling-Beispiel zum TeilenNächster Artikel：js-Anker-Scrolling-Beispiel zum Teilen

In Verbindung stehende Artikel

Mehr sehen