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
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(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