Au cours de la phase de développement du projet quotidien, l'effet de liaison de deuxième niveau de la boîte déroulante est souvent observé, en particulier lorsqu'il existe plusieurs options impliquant des régions, des variétés, etc. Par exemple: une boîte déroulante de liaison provinciale et municipale commune changera davantage lors de la sélection d'une province.
Idées:
1. L'effet dite de liaison souligne que lorsque les données changent au niveau du parent affecteront les modifications des éléments de données du niveau de l'enfant associés.
Vous trouverez ci-dessous les données des provinces et des villes qui ont été construites:
var linkDatas = {provinces: [{"code": "0", "nom": "s'il vous plaît Sélectionnez "}, {" code ":" 1 "," name ":" beijing "}, {" code ":" 2 "," name ":" tianjin "}, {" code ":" 3 "," name ":" Hebei "}, {" code ":" 4 "," name ":" hubei "}, {" code ":" 5 "," name ":" guangdong "}, {" code ":" 6 "," na Moi ":" Autre "}], Citys: {0: [" s'il vous plaît sélectionnez "], 1: [" District de Chaoyang "," District Haidian "," Dongcheng District "," District de Xicheng "," Fangshan District "," Autre "], 2: [" Tianjin "], 3: [" Cangzhou "," Shijiazhuang "," Qinhuangdao "," autre "], 4: [" Wuhan City "," Yichang City "," Xifan City "," autre "], 5: [" Guangzhou City "," Shenzhen City "," Shantou " City "," Foshan City "," Zhuhai City "," autre "], 6: [" autre "]}};2. Générez dynamiquement des nœuds d'option basés sur les données:
Fonction AddOptions (Target, Options) {var optionElele = null, cible = cible, option = options, optionlen = options.Length; for (var i = 0; i <optionlen; i ++) {optionEle = Document.CreateElement ('option'); optionEle.Value = option [i] .value; optionEleled = option [i] .text; cible.options.add (optionEle);}}3. Selon les données provinciales et municipales susmentionnées, le code représente l'identifiant qui pointe vers le "niveau provincial" et lorsque les données provinciales changent, l'événement de changement commence:
pro.Onchange = function () {console.log (this); var ct = ville [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; / * Ajouter la ville * / for (var j = 0; j <ctlen; j ++) {ctbox.push ({"text": ct [j], "valeur": ct [j]});} addoptions (c, ctbox);}Code html:
<div> <h3> Effet de liaison de la zone de tirette </h3> <p> province: <select name = "provinces" id = "provinces"> </ select> </p> <p> City: <Select name = "Citys" id = "Citys"> </ Select> </p> </div>
Tout le code JavaScript:
var linkDatas = {provinces: [{"code": "0", "nom": "s'il vous plaît Sélectionnez "}, {" Code ":" 1 "," Name ":" Beijing "}, {" Code ":" 2 "," Name ":" Tianjin "}, {" Code ":" 3 "," Name ": "Hebei"}, {"code": "4", "name": "hubei"}, {"code": "5", "name": "guangdong"}, {"code": "6", "name": "Autre"}], Citys: {0: ["s'il vous plaît sélectionnez"], 1: ["District de Chaoyang", "District Haidian", "Dongcheng District", "District de Xicheng", "Fangshan District "," Autre "], 2: [" Tianjin "], 3: [" Cangzhou "," Shijiazhuang "," Qinhuangdao "," autre "], 4: [" Wuhan City "," Yichang City "," Xifan City "," autre "], 5: [" Guangzhou City "," Shenzhen City "," Shantou " City "," Foshan City "," Zhuhai City "," Autre "], 6: [" autre "]}}; fonction Addoptions (Target, Options) {var optionEle = null, cible = cible, option = options, optionlen = optionSelelefength; for (var i = 0; i <optionlen '); i ++) {optionele = document.CreateElement (' '); VALLE. Option [i] .value; optionEle.Text = option [i] .text; target.options.add (optionEle);}} fonction provincitysLink (pro, c) {var ld = linkDatas, provinces = ld.provincices, city = ld.citys, initcity = city [0], probox = []; / * ajout province * / for (var i = 0; provinces.length; i ++) {probox.push ({"text": provinces [i] .name, "valeur": provinces [i] .code})} addoptions (pro, probox); / * initialiser la ville * / addoptions (c, [{"text": initCity, "valeur": initcity}]); / * ajout de lien * / pro. function () {console.log (this); var ct = ville [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; / * Ajouter City * / for (var j = 0; j <ctlen; j ++) {ctbox.push ({"text": ct [j], "valeur": ct [j]});} addoptions (c, ctbox);}} var provinces = document.getElementyid ('provinces'), Citys = Document.getElementByid («Citys»); ProvinceSCitySLink (Provinces, Citys);