Der Verknüpfungseffekt der zweiten Stufe des Dropdown-Boxs wird häufig in täglichen Anwendungsszenarien auftreten, insbesondere wenn mehrere Optionen mit Regionen, Sorten usw. vorhanden sind: Bei der Auswahl einer Provinz eine gemeinsame Provinz- und Gemeindeverknüpfungsbox ändert sich auch mehr mit den Änderungen.
Ideen:
1. Der sogenannte Verknüpfungseffekt weist darauf hin, dass sich die Änderungen der Daten auf der Ebene der Eltern auf die Änderungen der zugehörigen Datenelemente auf Kinderebene auswirken.
Im Folgenden finden Sie die Daten der Provinzen und Städte, die gebaut wurden:
var linkDatas = { provinces:[ { "code":"0", "name":"Please select" }, { "code":"1", "name":"Beijing" }, { "code":"2", "name":"Tianjin" }, { "code":"3", "name":"Hebei" }, { "code":"4", "name":"Hubei" }, { "code":"5", "name":"Guangdong" }, { "code":"6", "name":"Other" } ], cities:{ 0:[ "Please select" ], 1:[ "Chaoyang District", "Haidian District", "Dongcheng District", "Xicheng District", "Fangshan District", "Other" ], 2:[ "Tianjin" ], 3:[ "Cangzhou", "Shijiazhuang", "Qinhuangdao", "Other" ], 4:[ "Wuhan City", "Yichang City", "Xiangfan City", "Other" ], 5:[ "Guangzhou City", "Shenzhen City", "Shantou City", "Foshan City", "Zhuhai City", "Andere"], 6: ["Andere"]}};2. generieren dynamisch Optionsknoten basierend auf Daten:
Funktionsabzüge (Ziel, Optionen) {var optionele = null, target = target, option = option, optionlen = options.length; für (var i = 0; i <optionlen; i ++) {optionele = document.createelement ('option'); OptionEle.Value = Option [i] .Value; OptionEle.Text = Option [i] .Text; target.options.add (optionele); }}3. Nach den oben genannten Provinz- und kommunalen Daten stellt der Code die Kennung dar, die auf die "Provinzebene" und wenn sich die Provinzdaten ändert, startet das Änderungsereignis:
pro.onchange = function () {console.log (this); var ct = Stadt [this.Value], ctlen = ct.length, ctbox = []; C.innerhtml = ""; /*City hinzufügen*/ for (var j = 0; j <ctlen; j ++) {ctbox.push ({"text": ct [j], "value": ct [j]}); } adoptions (c, ctbox); }HTML -Code:
<Div> <h3> Pulldown-Box-Verknüpfungseffekt </h3> <p> Provinz: <select name = "provinces" id = "provinzen"> </select> </p> <p> Stadt: <select name = "citys" id = "Citys"> </select> </p> </div>
Alle JavaScript -Code:
var linkDatas = { provinces:[ { "code":"0", "name":"Please select" }, { "code":"1", "name":"Beijing" }, { "code":"2", "name":"Tianjin" }, { "code":"3", "name":"Hebei" }, { "code":"4", "name":"Hubei" }, { "code":"5", "name":"Guangdong" }, { "code":"6", "name":"Other" } ], cities:{ 0:[ "Please select" ], 1:[ "Chaoyang District", "Haidian District", "Dongcheng District", "Xicheng District", "Fangshan District", "Other" ], 2:[ "Tianjin" ], 3:[ "Cangzhou", "Shijiazhuang", "Qinhuangdao", "Other" ], 4:[ "Wuhan City", "Yichang City", "Xiangfan City", "Other" ], 5:[ "Guangzhou City", "Shenzhen City", "Shantou City", "Foshan City", "Zhuhai City", "Andere"], 6: ["Andere"]}}; Funktionsabzüge (Ziel, Optionen) {var optionele = null, target = target, option = option, optionlen = options.length; für (var i = 0; i <optionlen; i ++) {optionele = document.createelement ('option'); OptionEle.Value = Option [i] .Value; OptionEle.Text = Option [i] .Text; target.options.add (optionele); }} Funktion provincescitySlink (pro, c) {var ld = linkDatas, provinces = ld.provinzen, City = ld.citys, initcity = city [0], probox = []; /*Provinz hinzufügen*/ für (var i = 0; i <provinces.length; i ++) {probox.push ({"text": provinzen [i] .name, "value": provinzen [i] .code})}} teuflements (pro, probox); /*Initialisieren Sie die Stadt*/ addOptions (c, [{"text": initcity, "value": initcity}]); /*Verknüpfungsereignis hinzufügen*/ pro.onchange = function () {console.log (this); var ct = Stadt [this.Value], ctlen = ct.length, ctbox = []; C.innerhtml = ""; /*City hinzufügen*/ for (var j = 0; j <ctlen; j ++) {ctbox.push ({"text": ct [j], "value": ct [j]}); } adoptions (c, ctbox); }} var provinces = document.getElementById ('provinces'), cities = document.getElementById ('Citys'); ProvincescitySlink (Provinzen, Städte);Der obige einfache Implementierungscode (empfohlen) des Provinz- und kommunalen Verknüpfungseffekts ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.