O efeito de ligação de segundo nível da caixa suspensa é frequentemente encontrado em cenários diários de aplicação, especialmente quando existem várias opções envolvendo regiões, variedades etc. Por exemplo: uma caixa suspensa provincial e municipal comum, ao selecionar uma província, a lista da cidade também mudará mais com as mudanças.
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 = { 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", "Other"], 6: ["Outro"]}};2. Gere dinamicamente os nós de opções com base nos dados:
função addOptions (destino, opções) {var optionEle = null, destino = destino, opção = options, optionLen = options.length; for (var i = 0; i <optionlen; i ++) {optionEle = document.createElement ('option'); optionEle.value = opção [i] .Value; optionEle.Text = opção [i] .Text; Target.Options.add (OptionEle); }}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 = cidade [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> Efeito de ligação da caixa puxada </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 = { 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", "Other"], 6: ["Outro"]}}; função addOptions (destino, opções) {var optionEle = null, destino = destino, opção = options, optionLen = options.length; for (var i = 0; i <optionlen; i ++) {optionEle = document.createElement ('option'); optionEle.value = opção [i] .Value; optionEle.Text = 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], probx = []; /*Adicione a província*/ for (var i = 0; i <provipes.length; i ++) {probx.push ({"text": províncias [i] .name, "value": províncias [i] .code})} addoptions (pro, probx); /*Inicialize a cidade*/ addOptions (c, [{"text": initcity, "value": initcity}]); /*Adicione o evento de ligação*/ pro.onchange = function () {console.log (this); var ct = cidade [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); }} var províncias = document.getElementById ('Províncias'), cidades = document.getElementById ('Citys'); ProvincescitySlink (Províncias, Cidades);O código de implementação simples acima (recomendado) do efeito provincial e municipal de ligação é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.