Basado en JS, el código compartido del efecto de enlace provincial y municipal

Durante la etapa diaria de desarrollo del proyecto, a menudo se ve el efecto de enlace de segundo nivel del cuadro desplegable, especialmente cuando hay múltiples opciones que involucran regiones, variedades, etc. Por ejemplo: un cuadro desplegable de enlace provincial y municipal común cambiará más al seleccionar una provincia.

Ideas:

1. El llamado efecto de enlace señala que cuando los cambios de datos a nivel principal afectarán los cambios de los elementos de datos de nivel infantil asociados.

A continuación se muestran los datos de las provincias y ciudades que se han construido:

 var linkdatas = {provinces: [{"código": "0", "nombre": "Por favor Seleccione "}, {" código ":" 1 "," nombre ":" beijing "}, {" código ":" 2 "," nombre ":" tianjin "}, {" código ":" 3 "," nombre ":" Hebei "}, {" Código ":" 4 "," Nombre ":" Hubei "}, {" Código ":" 5 "," Nombre ":" Guangdong "}, {" Código ":" 6 "," Na Me ":" Otro "}], Ciudades: {0: [" Por favor seleccione "], 1: [" Distrito de Chaoyang "," Distrito Haidian "," Distrito Dongcheng "," Distrito Xicheng "," Fangshan Distrito "," otro "], 2: [" Tianjin "], 3: [" CANGZHOU "," Shijiazhuang "," Qinhuangdao "," Otro "], 4: [" Ciudad de Wuhan "," Ciudad de Yichang "," Ciudad Xifan "," Otro "], 5: [" Guangzhou City ", Ciudad "," Ciudad de Foshan "," Ciudad de Zhuhai "," Otro "], 6: [" Otro "]}};

2. Genere dinámicamente nodos de opción basados en datos:

 function addOptions (target, options) {var optionEele = null, target = target, opción = opciones, opcionLen = options.length; for (var i = 0; i <optionLen; i ++) {opcionEele = document.createElement ('opción'); opción

3. De acuerdo con los datos provinciales y municipales mencionados anteriormente, el código representa el identificador que apunta al "nivel provincial" y cuando los datos provinciales cambian, el evento de cambio comienza:

 pro.onchange = function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; /*Agregar ciudad*/ for (var j = 0; j <ctlen; j ++) {ctbox.push ({"text": ct [j], "valor": ct [j]});} adiciones (c, ctbox);}

Código HTML:

 <Viv> <h3> Efecto de enlace de cuadro de retiro </h3> <p> provincia: <select name = "provincias" id = "provincias"> </elect> </p> <p> ciudad: <select name = "citys" id = "citys"> </elect> </p> </div> </div>

Todo el código JavaScript:

 var linkdatas = {provinces: [{"código": "0", "nombre": "Por favor Seleccione "}, {" código ":" 1 "," nombre ":" Beijing "}, {" Código ":" 2 "," Nombre ":" Tianjin "}, {" Código ":" 3 "," Nombre ": "Hebei"}, {"Código": "4", "Nombre": "Hubei"}, {"Código": "5", "Nombre": "Guangdong"}, {"Código": "6", "Nombre": "Otro"}], Ciudades: {0: ["Por favor seleccione"], 1: ["Distrito de Chaoyang", "Distrito de Haidian", "Distrito Dongcheng", "Distrito Xicheng", "Fangshan Distrito "," otro "], 2: [" Tianjin "], 3: [" CANGZHOU "," Shijiazhuang "," Qinhuangdao "," Otro "], 4: [" Ciudad de Wuhan "," Ciudad de Yichang "," Ciudad Xifan "," Otro "], 5: [" Guangzhou City ", Ciudad "," Foshan City "," Zhuhai City "," Other "], 6: [" Otro "]}}; funciones adiciones (target, opciones) {var opcionEele = null, target = target, opción = opciones, opción = opciones.length; for (var i = 0; i <optionLen; i ++) {optionEne = documenteLeeLement ('option'; option[i].value;optionEle.text = option[i].text;target.options.add(optionEle);}}function provincesCitysLink(pro,c){var LD = linkDatas,provinces = LD.provinces,city = LD.citys,initCity = city[0],proBox = [];/*Add province*/for(var i = 0;i < provincias.length; i ++) {probox.push ({"text": provincias [i] .name, "valor": provincias [i] .code})} addOptions (pro, probox);/*inicializar la ciudad*/addOptions (c, [{"text": initcity, "value": initCity}]);/*adding enlinkage*/pro.onchange* function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; /*Agregar ciudad*/ for (var j = 0; j <ctlen; j ++) {ctbox.push ({"text": ct [j], "valor": ct [j]});} adiciones (c, ctbox);}} var provinces = document.getElementByid ('provinces'), ciudads = document.getElementById ('Ciudades'); ProvincescitySlink (provincias, ciudades);