Temas > Programacion > Java script - Java > Control SELECT en java script
Julio

Control SELECT
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:
<?php //esto no va
       document.form1.select1.selectedIndex
?>//esto no va
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:
<?php //esto no va
      
document.form1.select1.options[document.form1.select1.selectedIndex].text
?>//esto no va
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:
<?php //esto no va
      
document.form1.select1.options[document.form1.select1.selectedIndex].value
?>//esto no va
Ejemplo:
<?php //esto no va
<html>
<head>
</head>
<body>
<script language="JavaScript">
function cambiarColor()
{
  document.form1.text1.value = document.form1.select1.selectedIndex;
  document.form1.text2.value =
document.form1.select1.options[document.form1.select1.selectedIndex].text;
  document.form1.text3.value = document.form1.select1.options
[document.form1.select1.selectedIndex].value;
}
</script>
<form name="form1">
<select size="1" name="select1" ONCHANGE="cambiarColor()">
<option value="0xff0000">Rojo</option>
<option value="0x00ff00">Verde</option>
<option value="0x0000ff">Azul</option>
</select></p>
<br>
Número de índice seleccionado del objeto SELECT:<input type="text"
name="text1"><br>
Texto seleccionado:<input type="text" name="text2"><br>
Valor asociado:<input type="text" name="text3"><br>
</form>
</body>
</html>
?>//esto no va
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:
<?php //esto no va
       onChange="cambiarColor()"
?>//esto no va
Por cada opción del objeto SELECT tenemos una línea:
       Rojo
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.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
      1
2345678
9101112131415
16171819202122
23242526 272829
30      

Viernes 27 de Junio 2025
Semana 26

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar