El menú desplegable controla la visualización y ocultación del código JS en el menú desplegable secundario.
1. Determine el formato de los datos:
Primero, introduzcamos la sintaxis de creación de opciones:
Código:
-
var newOption = nueva opción (optionText, valor de opción);
-
De acuerdo con la sintaxis anterior, sabemos que la selección La opción se divide en texto de opción y valor de opción. optionText es la opción que vemos en el cuadro desplegable, optionvalue es el valor real enviado. Por ejemplo, vemos "Beijing" en una opción, pero el valor real enviado es "010".
Para mantener la coherencia, determinamos el formato de la opción como:
Código:
-
{txt: "Nombre de la opción" , val: "option value"}
-
Entonces el grupo de opciones es:
Código:
-
var child arr =【】;
ChildArr【'Valor de opción principal 1'】=【
{txt: "Nombre de opción 1", val: "Valor de opción 1 "} ,
{txt: "Nombre de opción 2", val: "Valor de opción 2"},
{txt: "Nombre de opción 3", val: "Valor de opción 3 "} ,
...
{txt: "Nombre de opción n", val: "Valor de opción n"}
]
ChildArr['Valor de opción principal 2']=[
{txt:"Nombre de opción 1", val:"Valor de opción 1"},
{txt:"Opción nombre 2", val: "Valor de opción 2"},
{txt: "Nombre de opción 3", val: "Valor de opción 3"},
...
{txt: "Nombre de la opción n", val: "Valor de la opción n"}
]
-
Donde "valor de la opción principal " es el valor seleccionado en la lista desplegable principal.
Nota: Los valores en [] y {} están separados por "," (coma), pero el último valor no puede ir seguido de "," (coma), de lo contrario se producirán errores de sintaxis. ¡Los programadores PHP deberían prestar especial atención! ! !
2. Cree una lista de opciones basada en la matriz entrante:
Código:
-
for(var I = 0; i & ltleni++)
{
seleccione obj opciones[I]=nueva opción (Lista de opciones[I]). Lista de opciones [I].
val);
}
-
3. Antes de configurar las opciones, debemos borrar las opciones originales:
Código:
p>-
Opción de eliminación de función (selectObj)
{
if (tipo de select obj!='object')
{
select obj = document . getelementbyid(select obj
}
//Recuento de opciones originales
var len = select obj options . length;
for(var I = 0;i<leni++)
{
//Eliminar la opción actual
p>seleccione opciones de obj【0】= nulo;
}
}
-
Tenga en cuenta que aquí usamos select obj . options [I] en lugar de select obj options [0], porque después de eliminar la opción [0], se agregarán las siguientes opciones, por lo que solo necesitamos seleccionar select obj options [0]. ] = nulo.
4. Establecer opciones de aviso y opciones predeterminadas:
Por lo general, configuraremos una opción de aviso en la lista desplegable, como "Seleccione una ciudad". Un valor vacío para esta opción simplemente solicita al usuario que realice una acción de selección.
Además, la lista desplegable también debe poder establecer opciones predeterminadas, es decir, configurar el elemento seleccionado cuando se carga la página.
El código completo es el siguiente:
-
Código JS:
-
& lenguaje ltscript = "JavaScript" type="text/JavaScript">
<! -
/*
*Descripción: borra el valor de la opción de la lista desplegable especificada.
*Autor: CodeBit.cn ()
*
* @ param { string | objeto] El nombre u objeto del objeto seleccionado. -el cuadro abajo debe ser Sí
*/
Opción de eliminación de función (seleccionar obj) {
if (tipo de seleccionar obj!='objeto'){
select obj = document . getelementbyid(select obj
}
//Recuento de opciones originales
var len = select obj); . opciones . longitud ;
for(var I = 0;I & ltleni++) {
//Eliminar la opción actual
seleccione obj . 】= null;
}
}
/*
*Descripción: establece el valor de la opción entrante en el menú desplegable especificado lista.
*Autor: CodeBit.cn ()
*
* @ param {string object】} select obj El nombre u objeto del destino. -el cuadro abajo debe ser Sí
* @param {Array} formato de configuración del valor de optionList: [{ txt:'Beijing', val:'010'}, { txt:'Shanghai', val:'020 '}], requerido para.
* @param {String} valor de primera opción, como "Seleccione" el valor está vacío;
* @param {String}El valor seleccionado predeterminado, opcional.
*/
Función de selección de conjunto (seleccionar obj, lista de opciones, primera opción, seleccionado) {
if (tipo de selección de obj!='objeto'){
seleccionar obj = documento . getelementbyid(seleccionar obj)
}
//Borrar opciones
eliminar opciones(seleccionar obj) ;
//Recuento de opciones
var start = 0;
//Agregue la primera opción si es necesario.
if (primera opción) {
select obj opciones【0】= nueva opción (primera opción, ");
//El recuento de opciones comienza desde 1 inicio.
start++;
}
var len = optionList.length
for(var I = 0; i & ltleni++ ) {
//Establecer opciones
select obj. options[start]=Nueva opción (Lista de opciones[I]);
if (seleccionado == lista de opciones [I]. val)
Seleccione la opción del objeto [Inicio].
seleccionado = true
}
//Aumentar el recuento en 1
start++;
}
}
//--& gt;
& lt/script & gt;
-
Código HTML:
-
& ltscript language="JavaScript" type="text/JavaScript">
var ciudad arr =【】;
ciudad arr ['Provincia de Jiangsu']=[
{txt: "Nanjing", val: "Nanjing"},
{txt: "Wuxi", val: "Wuxi"},
{txt: "Xuzhou", valor: "Xuzhou"},
{txt: "Suzhou", valor: "Suzhou"},
{ txt: "Nantong", val: "Nantong"},
{txt: "Huaiyin", val: "Huaiyin"},
{txt: "Yangzhou" y val: "Yangzhou"},
{txt:"Zhenjiang" y val:"Zhenjiang"},
{txt:"Changzhou", val:"Changzhou"}
];
ciudad arr['Provincia de Zhejiang']=[
{txt:"Hangzhou" and val:"Hangzhou"},
{txt: "Ningbo" y val: "Ningbo"},
{txt: "Wenzhou" y val: "Wenzhou"},
{txt: "Huzhou", val :"Huzhou"}
];
Configuración de funciones ciudad (provincia) {
setselectoption ('ciudad', cityarr [provincia], '-seleccione -');
}
& lt/script & gt;
& ltselect nombre = "provincia" id = "provincia" onchange = "if ( this . value! =''') establecer ciudad (this . opciones [this . selectedindex]. valor);>
<option value="">-Por favor seleccione-
& ltOption value="Provincia de Jiangsu"》Provincia de Jiangsu
& ltOption value="Provincia de Zhejiang"》Provincia de Zhejiang
& lt/select & gt;Provincia
<select name="ciudad" id="ciudad">
<option value="">-Por favor seleccione-
</select>Ciudad