Este otro objeto visual que podemos disponer en un FORM permite realizar
la selección de un string de una lista y tener asociado al mismo un
valor no visible. El objetivo fundamental en JavaScript es determinar
qué elemento está seleccionado y qué valor tiene asociado. Esto lo
hacemos cuando ocurre el evento onChange.
Para determinar la posición del índice seleccionado en la lista:
document.getElementById('select1').selectedIndex;
Considerando que el objeto SELECT se llama select1 accedemos a la propiedad selectedIndex (almacena la posición del string seleccionado de la lista, numerando a partir de cero).
Para determinar el string seleccionado:
Para determinar la posición del índice seleccionado en la lista:
document.getElementById('select1').selectedIndex;
Considerando que el objeto SELECT se llama select1 accedemos a la propiedad selectedIndex (almacena la posición del string seleccionado de la lista, numerando a partir de cero).
Para determinar el string seleccionado:
document.getElementById('select1').options[document.getElementById('select1').selectedIndex].text;
Es decir que el objeto select1 tiene otra propiedad llamada options, a
la que accedemos por medio de un subíndice, al string de una determinada
posición.
Hay problemas en los que solamente necesitaremos el string almacenado en el objeto SELECT y no el valor asociado (no es obligatorio asociar un valor a cada string).
Y por último con esta expresión accedemos al valor asociado al string:
document.getElementById('select1').options[document.getElementById('select1').selectedIndex].value;
Un ejemplo completo que muestra el empleo de un control SELECT es:
<html>
<head>
</head>
<body>
<script type="text/javascript">
function cambiarColor()
{
var seleccion=document.getElementById('select1');
document.getElementById('text1').value=seleccion.selectedIndex;
document.getElementById('text2').value=seleccion.options[seleccion.selectedIndex].text;
document.getElementById('text3').value=seleccion.options[seleccion.selectedIndex].value;
}
</script>
<form>
<select id="select1" onChange="cambiarColor()">
<option value="0xff0000">Rojo</option>
<option value="0x00ff00">Verde</option>
<option value="0x0000ff">Azul</option>
</select>
<br>
Número de índice seleccionado del objeto SELECT:<input type="text" id="text1"><br>
Texto seleccionado:<input type="text" id="text2"><br>
Valor asociado:<input type="text" id="text3"><br>
</form>
</body>
</html>
Se debe analizar en profundidad este problema para comprender
primeramente la creación del objeto SELECT en HTML, y cómo acceder luego
a sus valores desde Javascript.Es importante para el objeto SELECT definir qué función llamar cuando ocurra un cambio: onChange="cambiarColor()".
Por cada opción del objeto SELECT tenemos una línea:
Donde Rojo es el string que se visualiza en el objeto SELECT y value es el valor asociado a dicho string.
Analizando la función cambiarColor() podemos ver cómo obtenemos los valores fundamentales del objeto SELECT.
No hay comentarios.:
Publicar un comentario