Una comprensión básica:
var e = document.getElementById("selectId");
e. opciones = nueva opción ("texto", "valor");
//Crea un objeto de opción, es decir, crea uno o más <option value="value">text</option> en la etiqueta <select>
//opciones es una matriz que puede almacenar múltiples etiquetas como <option value="value">text</option>
1: Propiedades de la matriz de opciones []:
atributo de longitud---------atributo de longitud
Atributo selectedIndex--------El valor de índice del texto en el cuadro seleccionado actualmente. Este valor de índice es asignado automáticamente por la memoria (0,1,2,3...) correspondiente a (el primer valor de texto. , segundo valor de texto, tercer valor de texto, cuarto valor de texto...)
2: Atributos de una sola opción (---obj.options[obj.selecedIndex] es una etiqueta <option> especificada, que es ---)
atributo de texto---------devolver/especificar texto
atributo de valor------Devolver/especificar valor, consistente con <opciones valor="...">.
atributo de índice-------devuelve el subíndice,
atributo seleccionado ------- Devuelve/especifica si el objeto está seleccionado Al especificar verdadero o falso, el elemento seleccionado se puede cambiar dinámicamente.
Atributo defaultSelected-----Devuelve si el objeto está seleccionado de forma predeterminada. verdadero/falso.
3: método de opción
Agregue una etiqueta <opción>-----obj.options.add(new("text","value"));<add>
Eliminar una etiqueta <option>-----obj.options.remove(obj.selectedIndex)<delete>
Obtener el texto de una etiqueta <option>-----obj.options[obj.selectedIndex].text<check>
Modificar el valor de una etiqueta <option>-----obj.options[obj.selectedIndex]=new Option("new text","new value")<change>
Eliminar todas las etiquetas <option>-----obj.options.length = 0
Obtener el valor de una etiqueta <option>-----obj.options[obj.selectedIndex].value
Aviso:
R: El método anterior está escrito como este tipo de método obj.options.function() en lugar de obj.funciton, porque para considerar la compatibilidad en IE y FF, como obj.add() solo es válido en IE.
b: No es necesario escribir en mayúscula la opción en obj.option, y la opción en la nueva opción debe escribirse en mayúscula.
Dos aplicaciones
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<lenguaje de escritura="javascript">
número de función(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat","4");//Cambio en el valor del seleccionado actualmente
//obj.options.add(new Option("Mi comida","4"));Agregar otra opción
//alert(obj.selectedIndex);//muestra el número de serie, la opción se establece sola
//obj.options[obj.selectedIndex].text = "Mi comida" cambiar valor;
//obj.remove(obj.selectedIndex); función de eliminación
}
</script>
</cabeza>
<cuerpo>
<seleccionar id="miSelección">
<option>Mi bolso</option>
<option>Mi cuaderno</option>
<option>Mi Aceite</option>
<option>Mi carga</option>
</seleccionar>
<tipo de entrada="botón" nombre="botón" valor="Ver resultados" onclick="número();">
</cuerpo>
</html>
En base a estas cosas, implementé una pequeña función usando JQEURY AJAX+JSON de la siguiente manera:
Código JS: (solo se toma el código relacionado con SELECT)
Copie el código de código de la siguiente manera:
/**
* @description Lista desplegable de vinculación de componentes (implementada usando AJAX y JSON de JQUERY)
* @prarm selectId ID de la lista desplegable
* Método @prarm El nombre del método que se llamará.
* @prarm temp El ID del software se almacena aquí
* @prarm url La dirección a la que saltar
*/
función linkAgeJson(selectId,método,temp,url){
$j.ajax({
escriba: "get", // Utilice el método get para acceder al fondo
dataType: "json", // Devuelve datos en formato json
url: url, // Dirección de backend a la que se accederá
datos: "método=" + método+"&temp="+temp,//Datos a enviar
éxito: function(msg){//msg son los datos devueltos, el enlace de datos se realiza aquí
var datos = msg.lists;
coverJsonToHtml(selectId,datos);
}
});
}
/**
* @description Convierte datos JSON a formato de datos HTML
* @prarm selectId ID de la lista desplegable
* @prarm nodeArray devolvió una matriz JSON
*
*/
función coverJsonToHtml(selectId,nodeArray){
//obtener selección
var tempSelect=$j("#"+selectId);
//borrar valor seleccionado
isClearSelect(selectId,'0');
var tempOption=null;
for(var i=0;i<nodeArray.length;i++){
//crear opción de selección
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//poner opción para seleccionar
tempSelect.append(tempOption);
}
// Obtener la lista de componentes degradados
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Borra el valor de la lista desplegable
* @prarm selectId ID de la lista desplegable
* @prarm index La posición del índice para comenzar a limpiar
*/
la función esClearSelect(selectId,index){
var longitud=document.getElementById(selectId).options.length;
mientras(longitud!=índice){
//La longitud está cambiando porque hay que volver a adquirirla
longitud=document.getElementById(selectId).options.length;
para(var i=índice;i<longitud;i++)
document.getElementById(selectId).options.remove(i);
longitud=longitud/2;
}
}
/**
* @description Obtenga la lista de componentes degradados
* @prarm selectId1 se refiere al ID de la lista desplegable de software
* @prarm selectId2 ID de la lista desplegable de componentes degenerados
*/
función getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1);//Lista desplegable de software de referencia
var obj2=document.getElementById(selectId2);//Lista desplegable de componentes degenerados
var len=obj1.opciones.longitud;
//Cuando la longitud de la lista de software a la que se hace referencia es igual a 1, se devuelve y no se realiza ninguna operación.
si(len==1){
devolver falso;
}
//Borra el valor de la lista desplegable, ambos métodos están disponibles
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i<len; i++){
opción var= obj1.opciones[i];
//Los elementos seleccionados a los que hace referencia el software no se agregan
si(i!=obj1.selectedIndex){
//Clonar OPCIÓN y agregar a SELECCIONAR
obj2.appendChild(opción.cloneNode(verdadero));
}
}
}
código HTML:
Copie el código de código de la siguiente manera:
<TABLE border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td> <span>*</span>Software de cotización:</td>
<td>
<nombre de entrada="yyrjMc" id="yyrjMc" tipo="texto" tabindex="3" tamaño="30" >
<nombre de entrada="yyrjDm" id="yyrjDm" tipo="oculto" >
<tipo de entrada="botón"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" valor="Seleccionar...">
</td>
</tr>
<tr>
<td> <span>*</span>Versión de cotización:</td>
<td id="yyfb">
<seleccione nombre="yyfbDm" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</seleccionar>
</td>
</tr>
<tr>
<td>Componentes degenerados:</td>
<td id="thgj">
<seleccione nombre="thgjDm" id="thgjDm">
<option value="-1" seleccionado>Ninguno</option>
</seleccionar>
</td>
</tr>
</TABLA>