Os exemplos deste artigo compartilham os efeitos especiais do menu suspenso JS para sua referência. O conteúdo específico é o seguinte
Exemplo 1: menu suspenso provincial e municipal vinculado
O evento OnChange ocorre quando o conteúdo do domínio muda.
<script type = "text/javascript"> var arr = new Array (); // Data Array // Defina dados, estrutura: ID, nome, identificação pai arr [arr.length] = [1, 'Pequim', NULL]; arr [arr.length] = [2, 'sichuan', nulo]; arr [arr.length] = [3, 'Guangdong', nulo]; arr [arr.length] = [4, 'Pequim', 1]; arr [arr.length] = [5, 'Chengdu', 2]; arr [arr.length] = [6, 'Guangzhou', 3]; arr [arr.length] = [7, 'Shenzhen', 3]; // Configuração dinâmica da função do item pull-down FillOptions (type) {if (type == 'Província') {// Obtenha o DOM do menu suspenso Província Var Província = document.getElementById ("Província"); província.innerhtml = ''; // Conteúdo vazio primeiro // preencha o sub-caractere var prostr = '<opção value = ""> </pption>'; // Transfira a matriz para (var i = 0; i <arn.length; i ++) {var item = arr [i]; // item atual // Se não houver identificação pai, é a província se (item [2] == null) prostr+= '<opção value ='+item [0]+'>'+item [1]+'</pption>'; } Província.innerhtml = prostr; // preencha o novo conteúdo} else if (type == 'city') {// obtenha o id da província atual var currproid = document.getElementById ("província"). if (currProid == '') retorna false; // Obtenha o menu suspenso DOM da cidade var cidade = document.getElementById ("City"); city.innerhtml = ''; // preencha o conteúdo primeiro // preencha o caractere var citystr = '<opção value = ""> </ppthion>'; // transweep a matriz para (var i = 0; i <arr.length; i ++) {var item = arr [i]; // Item atual // julga se é a cidade salva atual se (item [2] == currProid) cityStr+= '<opção value ='+item [0]+'>'+item [1]+'</pption>'; } city.innerhtml = citystr; // preencher novo conteúdo}} </script> <body style = "text-align: Center;" onLload = "FillOptions ('Província');"> <!-Defina o menu suspenso-> Economia: <select id = "Província" OnChange = "FillOptions ('City')"> </leclect> <br/> <br/> Cidade: <select Id = "City"> </select> <br/br/bods/body>:Exemplo 2: vínculo de três níveis de províncias, cidades e condados menus suspensos
<script type = "text/javascript"> var arr = new Array (); // Data Array // Defina dados, estrutura: ID, nome, identificação pai arr [arr.length] = [1, 'Pequim', NULL]; arr [arr.length] = [2, 'sichuan', nulo]; arr [arr.length] = [3, 'Guangdong', nulo]; arr [arr.length] = [4, 'Pequim', 1]; arr [arr.length] = [5, 'Chengdu', 2]; arr [arr.length] = [6, 'Guangzhou', 3]; arr [arr.length] = [7, 'Shenzhen', 3]; arr [arr.length] = [8, 'Wuhou District', 5]; arr [arr.length] = [9, 'Qingyang District', 5]; arr [arr.length] = [10, 'Baiyun District', 6]; arr [arr.length] = [11, 'Zengcheng City', 6]; arr [arr.length] = [12, 'Conghua City', 6]; // Configuração dinâmica da função do projeto de retirada Forte (tipo) {if (type == 'Província') {// Obtenha o DOM do menu suspenso Província Var Province = Document.getElementById ("Província"); província.innerhtml = ''; // O conteúdo está vazio primeiro // preenche os caracteres do var prostr = '<option value = ""> </pption>'; for (var i = 0; i <arr.length; i ++) {// transfira a matriz var item = arr [i]; // item atual // Se não houver identificação pai, é a província se (item [2] == null) prostr+= '<opção value ='+item [0]+'>'+item [1]+'</pption>'; } provide.innerhtml = prostr; // preencha o novo conteúdo} else if (type == 'city') {// obtenha o ID da província atual var currProid = document.getElementById ("Província"). if (currProid == '') retorna false; // Obtenha o menu suspenso DOM da cidade var cidade = document.getElementById ("City"); city.innerhtml = ''; // Conteúdo vazio primeiro // preencha o caractere da cidade var citystr = '<opção value = ""> </ppthion>'; for (var i = 0; i <arr.length; i ++) {// transfira a matriz var item = arr [i]; // Item atual // julga se é a cidade atualmente salva se (item [2] == currProid) CityStr+= '<opção value ='+item [0]+'>'+item [1]+'</pption>'; } city.innerhtml = citystr; // preencha o novo conteúdo} else if (type == 'área') {// obtenha o id do atual city varcityid = document.getElementById ("cidade"). if (currcityId == '') retorna false; // Obtenha o DOM do menu suspenso Distrito e do Condado var área = document.getElementById ("área"); área.innerhtml = ''; // preencha o caractere distrital e do condado var áreastr = '<opção value = ""> </pption>'; for (var i = 0; i <arr.length; i ++) {// transfira a matriz var item = arr [i]; // Item atual // julga se é um distrito ou município na cidade atual se (item [2] == CurcityID) ARISTR+= '<Valor da opção ='+item [0]+'>'+item [1]+'</pption>'; } are.innerhtml = áreastr; // preencher novo conteúdo}} </script> <body style = "text-align: Center;" onLload = "FillOptions ('Província');"> <!-Definir menu suspenso-> Província: <select id = "Província" OnChange = "FillOptions ('City')"> </select> <br/> <br/> Cidade: <select ID = "City" Onnchange = "FillOptions ('Area')"> </Select> id = "área"> </leclect> <br/> <br/> </body>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.