Während der täglichen Projektentwicklungsphase wird häufig der Verknüpfungseffekt der zweiten Stufe des Dropdown-Boxs gesehen, insbesondere wenn mehrere Optionen mit Regionen, Sorten usw. vorhanden sind: Eine gemeinsame Dropdown-Box der Provinz und der kommunalen Verknüpfung wird bei der Auswahl einer Provinz mehr ändert.
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": "bitte Wählen Sie "}, {" Code ":" 1 "," Name ":" Beijing "}, {" Code ":" 2 "," Name ":" Tianjin "}, {" Code ":" 3 "," Name ":" Hebei "}, {" Code ":" 4 "," Name ":" Hubei "}, {" Code ":" 5 "," Name ":" Guangdong "}, {" Code ":" 6 "," Na ME ":" Andere "}], Citys: {0: [" Bitte auswählen "], 1: [" Chaoyang District "," Haidian District "," Dongcheng District "," Xicheng District "," Fangshan " District","Other"],2:["Tianjin"],3:["Cangzhou","Shijiazhuang","Qinhuangdao","Other"],4:["Wuhan City","Yichang City","Xifan City","Other"],5:["Guangzhou City","Shenzhen City","Shantou City","Foshan Stadt "," 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 ('optionEt'); optionele.value = option [i] .value;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 = city [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": "bitte Wählen Sie "}, {" Code ":" 1 "," Name ":" Beijing "}, {" Code ":" 2 "," Name ":" Tianjin "}, {" Code ":" 3 "," Name ": "Hebei"}, {"Code": "4", "Name": "Hubei"}, {"Code": "5", "Name": "Guangdong"}, {"Code": "6", "Name": "Andere"}], Citys: {0: ["Bitte auswählen"], 1: ["Chaoyang District", "Haidian District", "Dongcheng District", "Xicheng District", "Fangshan District","Other"],2:["Tianjin"],3:["Cangzhou","Shijiazhuang","Qinhuangdao","Other"],4:["Wuhan City","Yichang City","Xifan 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 = option.Length; für (var i = 0; i <optionlen; i ++) {optionele = document. Option [i] .Value; optionele.text = option [i] .Text; target.options.add (Optionele);}} Funktion provincescitySlink (pro, c) {var ld = linkdatas, provinzen = ld.provinzen, City = ld.citys, Initcity = City = 0], probox = []; provinces.length; i ++) {probox.push ({"text": provinces [i] .name, "value": provinces [i] .code}) adoptions (pro, probox);/*initialisieren die Stadt*/addOptions (c, [{"Text": Initcity, "Value": "Value": Initcity}]; function () {console.log (this); var ct = city [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.getElementByIdByid ('provinces (' provinces '), Citys = Citys = Citys = Citys =) document.getElementById ('Citys'); ProvincescitySlink (Provinzen, Städte);