Durante a fase diária de desenvolvimento do projeto, o efeito de ligação de segundo nível da caixa suspensa é frequentemente visto, especialmente quando existem várias opções envolvendo regiões, variedades etc. Por exemplo: uma caixa suspensa provincial e municipal comum mudará mais ao selecionar uma província.
Ideias:
1. O chamado efeito de ligação aponta que quando os dados alteram no nível dos pais afetarão as alterações dos elementos de dados do nível da criança associados.
Abaixo estão os dados das províncias e cidades que foram construídas:
var linkDatas = {províncias: [{"code": "0", "Nome": "Por favor Selecione "}, {" código ":" 1 "," nome ":" beijing "}, {" code ":" 2 "," name ":" tianjin "}, {" code ":" 3 "," nome ":" Hebei "}, {" code ":" 4 "," nome ":" hubei "}, {" code ":" 5 "," name ":" guangdong "}, {" code ":" 6 "," na eu ":" Outro "}], Cidades: {0: [" Por favor selecione "], 1: [" distrito de Chaoyang "," distrito de Haidian "," distrito de Dongcheng "," Distrito de Xicheng "," 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 "," Other "], 6: [" Other "]}};2. Gere dinamicamente os nós de opções com base nos dados:
função addOptions (destino, opções) {var optionEle = null, alvo = destino, opção = optio, optionLen = options.length; para (var i = 0; i <optionLen; i ++) {optionEle = document.CreateElement ('option'); optionEle.value = [i] .value; option.telelement ('.3. De acordo com os dados provinciais e municipais acima mencionados, o código representa o identificador que aponta para o "nível provincial" e quando os dados provinciais mudam, o evento de mudança inicia:
pro.onchange = function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; /*Adicione cidade*/ for (var j = 0; j <ctlen; j ++) {ctbox.push ({"text": ct [j], "value": ct [j]});} addOptions (c, ctbox);}Código HTML:
<div> <h3> Puxe o efeito da ligação da caixa para baixo </h3> <p> Província: <select name = "Províncias" id = "províncias"> </leclect> </p> <p> cidade: <select name = "citys" id = "cidades"> </leclect> </p> </div>
Todo o código JavaScript:
var linkDatas = {províncias: [{"code": "0", "Nome": "Por favor Selecione "}, {" code ":" 1 "," name ":" beijing "}, {" code ":" 2 "," nome ":" tianjin "}, {" code ":" 3 "," nome ": "Hebei"}, {"code": "4", "nome": "hubei"}, {"code": "5", "name": "guangdong"}, {"code": "6", "nome": "Outros"}], Cidades: {0: ["Selecione"], 1: ["distrito de Chaoyang", "distrito de Haidian", "distrito de Dongcheng", "Distrito de Xicheng", "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 "," Other "], 6: [" Other "]}}; função addOptions (Target, Opções) {var optionEle = null, Target = Target = Option = Options, optionLen = Options.Length; para (var i = 0; i <optionLen; i ++) {optionEleEle = (document.cretElement. (var i = 0; opção [i] .Text; Target.Options.add (OptionEle);}} função ProvincescitySlink (pro, c) {var ld = linkDatas, províncias = ld.provinces, cidade = ld.citys, initcity = city [0], provavelmente [];;/* provinces.length; i ++) {probx.push ({"text": províncias [i] .nome, "value": províncias [i] .code})} addoptions (pro, probx);*add a city*/addOptions (c, [{"text": initCity, "": ": init.) function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; /*Adicione a cidade*/ for (var j = 0; j <ctlen; j ++) {ctbox.push ({"text": ct [j], "value": ct [j]});} addoptions (c, ctbox);}} var provinces = document.getElementById ('Provinces'),}}} Document.getElementById ('Citys'); ProvincescitySlink (Províncias, Cidades);