Los ejemplos en este artículo comparten los efectos especiales del menú desplegable JS para su referencia. El contenido específico es el siguiente
Ejemplo 1: menú desplegable provincial y municipal vinculado
El evento Onchange ocurre cuando cambia el contenido del dominio.
<script type = "text/javaScript"> var arr = new Array (); // matriz de datos // Definir datos, estructura: identificación, nombre, ID de padre ARR [arr.length] = [1, 'beijing', null]; arr [arr.length] = [2, 'sichuan', null]; arr [arr.length] = [3, 'Guangdong', nulo]; arr [arr.length] = [4, 'beijing', 1]; arr [arr.length] = [5, 'Chengdu', 2]; arr [arr.length] = [6, 'Guangzhou', 3]; arr [arr.length] = [7, 'shenzhen', 3]; // Configuración dinámica de la función de elemento desplegable FillOptions (type) {if (type == 'Province') {// Obtener el DOM del menú desplegable de la provincia var Province = document.getElementById ("provincia"); provincia.innerhtml = ''; // Contenido vacío primero // Complete el sub-Character var prostr = '<opción valor = ""> </opción>'; // transferir la matriz para (var i = 0; i <arr.length; i ++) {var item = arr [i]; // Artículo actual // Si no hay ID de padre, es la provincia if (item [2] == null) prostr+= '<opción valor ='+item [0]+'>'+item [1]+'</option>'; } provincia.innerhtml = prostr; // Complete el nuevo contenido} else if (type == 'City') {// Obtener la identificación de la provincia actual var CurrProid = document.getElementById ("provincia"). valor; if (CurrProid == '') return false; // Obtener el DOM del menú desplegable de la ciudad var city = document.getElementById ("ciudad"); ciudad.innerhtml = ''; // Complete el contenido primero // complete el carácter var citystr = '<option value = ""> </option>'; // transweep la matriz para (var i = 0; i <arr.length; i ++) {var item = arr [i]; // Artículo actual // juzga si es la ciudad guardada actual if (item [2] == CurrProid) CityStr+= '<option value ='+item [0]+'>'+item [1]+'</option>'; } city.innerhtml = citystr; // rellenar nuevo contenido}} </script> <cuerpo style = "text-align: center;" onload = "FillOptions ('Province');"> <!-Define el menú desplegable-> ahorros: <select id = "Province" onChange = "FillOptions ('City')"> </elect> <br/> <br/> City: <Select ID = "City"> </Select> <br/> <br/> </body>Ejemplo 2: Vínculo de tres niveles de menús desplegables de provincias, ciudades y condados
<script type = "text/javaScript"> var arr = new Array (); // matriz de datos // Definir datos, estructura: identificación, nombre, ID de padre ARR [arr.length] = [1, 'beijing', null]; arr [arr.length] = [2, 'sichuan', null]; arr [arr.length] = [3, 'Guangdong', nulo]; arr [arr.length] = [4, 'beijing', 1]; arr [arr.length] = [5, 'Chengdu', 2]; arr [arr.length] = [6, 'Guangzhou', 3]; arr [arr.length] = [7, 'shenzhen', 3]; arr [arr.length] = [8, 'Distrito de Wuhou', 5]; arr [arr.length] = [9, 'Distrito Qingyang', 5]; arr [arr.length] = [10, 'Distrito Baiyun', 6]; arr [arr.length] = [11, 'Zengcheng City', 6]; arr [arr.length] = [12, 'Conghua City', 6]; // Configuración dinámica de la función de proyecto desplegable FillOptions (type) {if (type == 'Province') {// Obtener el DOM del menú desplegable de la provincia var Province = document.getElementById ("Province"); provincia.innerhtml = ''; // El contenido está vacío primero // complete los caracteres del var prostr = '<opción valor = ""> </opción>'; for (var i = 0; i <arr.length; i ++) {// transfiere la matriz var item = arr [i]; // Artículo actual // Si no hay ID de padre, es la provincia if (item [2] == null) prostr+= '<opción valor ='+item [0]+'>'+item [1]+'</option>'; } provincia.innerhtml = postr; // Complete el nuevo contenido} else if (type == 'City') {// Obtenga la ID de la provincia actual var CurrProid = document.getElementById ("provincia"). Valor; if (CurrProid == '') return false; // Obtener el DOM del menú desplegable de la ciudad var city = document.getElementById ("ciudad"); ciudad.innerhtml = ''; // Contenido vacío primero // Complete el carácter de la ciudad var citystr = '<option value = ""> </option>'; for (var i = 0; i <arr.length; i ++) {// transfiere la matriz var item = arr [i]; // Artículo actual // juzga si es la ciudad guardada actualmente if (item [2] == CurrProid) CityStr+= '<option value ='+item [0]+'>'+item [1]+'</option>'; } city.innerhtml = citystr; // Complete nuevo contenido} else if (type == 'área') {// Obtener la identificación de la ciudad actual var curvCityID = document.getElementById ("ciudad"). valor; if (CurrCityID == '') return false; // Obtener el DOM del menú desplegable del distrito y del condado var área = document.getElementById ("área"); área.innerhtml = ''; // Complete el distrito y el carácter del condado var áreasTr = '<option value = ""> </option>'; for (var i = 0; i <arr.length; i ++) {// transfiere la matriz var item = arr [i]; // Artículo actual // juzga si es un distrito o condado bajo la ciudad actual if (item [2] == CurrcityID) ASETRTR+= '<option value ='+item [0]+'>'+item [1]+'</option>'; } área.innerhtml = áreasTr; // llenar nuevo contenido}} </script> <body style = "text-align: center;" onload = "FillOptions ('Province');"> <!-Define Menú desplegable-> Provincia: <select id = "Province" onChange = "FillOptions ('City')"> </elect> <br/> <br/> City: <Select id = "City" OnChange = "Filloptions ('Área')"> </select> <br/> <BR/> Condado/Distrito: Select: "City" id = "área"> </select> <br/> <br/> </body>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.