Código de implementación simple para efectos de enlace provinciales y municipales (recomendado)

El efecto de enlace de segundo nivel del cuadro desplegable a menudo se encuentra en escenarios de aplicación diaria, especialmente cuando hay múltiples opciones que involucran regiones, variedades, etc. Por ejemplo: un cuadro desplegable de enlace provincial y municipal común, al seleccionar una provincia, la lista de la ciudad también cambiará más con los cambios.

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": "Seleccione"}, {"código": "1", "nombre": "Beijing"}, {"Code": "2", "Nombre": "Tianjin"}, {"Código": "3", "Nombre": "HEBEI" "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", "Otro"], 4: ["Wuhan City", "Yichang City", "Xiangfan City", "Otro", 5: ["Ciudad de Guangzhou", "SHENZHEN CITY", "SHANTOU CITY", ",", "Ciudad" ",", "Ciudad", ",", "Ciudad", ",", "Ciudad", ",", "Ciudad" ",", "," Ciudad ",", ",", "," Ciudad "", ",", "," Ciudad "", ",", ",", "," Shenzhen City "," Shantou City ",", ",", ",", ", ciudad", "shenzhen". "Ciudad de Zhuhai", "Otro"], 6: ["Otro"]}};

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

 Function AddOptions (Target, Options) {var optionELE = null, target = target, opción = opciones, opcionLen = options.length; for (var i = 0; i <optionLen; i ++) {optionELE = document.createElement ('opción'); opcionEle.Value = option [i] .Value; opcionEle.Text = option [i] .Text; Target.options.add (opcionEele); }}

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]}); } addOptions (c, ctbox); }

Código HTML:

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

Todo el código JavaScript:

 var linkdatas = {provinces: [{"código": "0", "nombre": "Seleccione"}, {"código": "1", "nombre": "Beijing"}, {"Code": "2", "Nombre": "Tianjin"}, {"Código": "3", "Nombre": "HEBEI" "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", "Otro"], 4: ["Wuhan City", "Yichang City", "Xiangfan City", "Otro", 5: ["Ciudad de Guangzhou", "SHENZHEN CITY", "SHANTOU CITY", ",", "Ciudad" ",", "Ciudad", ",", "Ciudad", ",", "Ciudad", ",", "Ciudad" ",", "," Ciudad ",", ",", "," Ciudad "", ",", "," Ciudad "", ",", ",", "," Shenzhen City "," Shantou City ",", ",", ",", ", ciudad", "shenzhen". "Ciudad de Zhuhai", "Otro"], 6: ["Otro"]}}; Function AddOptions (Target, Options) {var optionELE = null, target = target, opción = opciones, opcionLen = options.length; for (var i = 0; i <optionLen; i ++) {optionELE = document.createElement ('opción'); opcionEle.Value = option [i] .Value; opcionEle.Text = option [i] .Text; Target.options.add (opcionEele); }} function ProvinceSslink (pro, c) {var ld = linkdatas, provinces = ld.provinces, ciudad = ld.citys, initcity = city [0], probox = []; /*Agregar provincia*/ for (var i = 0; i <provinces.length; i ++) {probox.push ({"texto": provincias [i] .name, "valor": provincias [i] .code})} adiciones (pro, probox); /*Inicializar la ciudad*/ adiciones (c, [{"texto": initcity, "valor": initcity}]); /*Agregar evento de enlace*/ 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]}); } addOptions (c, ctbox); }} var provincias = document.getElementById ('Provinces'), Cities = document.getElementById ('Citys'); ProvincescitySlink (provincias, ciudades);

El código de implementación simple anterior (recomendado) del efecto de enlace provincial y municipal es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.