L'effet de liaison de deuxième niveau de la boîte déroulante est souvent rencontré dans les scénarios d'application quotidiens, 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, lors de la sélection d'une province, la liste de la ville changera également plus avec les modifications.
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", "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", "autre"], 6: ["autre"]}};2. Générez dynamiquement des nœuds d'option basés sur les données:
Fonction Addoptions (cible, options) {var optionEle = null, cible = cible, option = options, optionlen = options.Length; pour (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. 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 boîte de la boîte à traction </h3> <p> province: <select name = "provinces" id = "provinces"> </ select> </p> <p> ville: <select name = "Citys" id = "Citys"> </ Select> </p> </div>
Tout le code JavaScript:
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", "autre"], 6: ["autre"]}}; Fonction Addoptions (cible, options) {var optionEle = null, cible = cible, option = options, optionlen = options.Length; pour (var i = 0; i <optionlen; i ++) {optionEle = document.CreateElement ('option'); optionEle.Value = option [i] .Value; optionele.text = option [i] .text; Target.options.Add (optionEle); }} fonction provincitysLink (pro, c) {var ld = linkDatas, provinces = ld.provinces, city = ld.citys, initCity = city [0], probox = []; / * Ajouter la province * / for (var i = 0; i <provinces.length; i ++) {probox.push ({"text": provinces [i] .name, "valeur": provinces [i] .code})} addoptions (pro, probox); / * Initialiser la ville * / addoptions (c, [{"text": initCity, "Value": InitCity}]); / * Ajouter un événement de liaison * / 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); }} var provinces = document.getElementById ('provinces'), cities = document.getElementById ('Citys'); ProvinceSCitySlink (Provinces, Citys);Le code d'implémentation simple ci-dessus (recommandé) de l'effet de liaison provincial et municipal est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.