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
161718192021 22
23242526272829
30      

Domingo 22 de Junio 2025
Semana 25



Java script - Java


-Input type submit con evento onclick
-Maneras de salir de un iframe con java script
-Sintaxis de un list array en java
-Consumir un JSON desde PHP
-Producir JSON desde PHP
-Mostrar un tooltip con datos recuperados en jQuery
-Menu desplegable en jQuery
-Llamadas encadenadas de metodos del objeto jQuery
-Funcion ajax en jQuery
-JSON en jQuery
-Pasando datos por los metodos GET y POST en jQuery
-Ajax metodos ajaxStart y ajaxStop en jQuery
-Ajax metodo load en jQuery
-Iteracion por los elementos each en jQuery
-Efecto con el metodo toggle en jQuery
-Efecto con el metodo fadeTo en jQuery
-Efectos con los metodos fadeIn y fadeOut en jQuery
-Efectos con los metodos show y hide en jQuery
-Manipulacion de los elementos del DOM en jQuery
-Evento blur en jQuery
-Evento focus en jQuery
-Evento dblclick en jQuery
-Eventos mousedown y mouseup en jQuery
-Evento mousemove en jQuery
-Evento hover en jQuery
-Eventos mouseover y mouseout en jQuery
-Administracion de eventos con jQuery
-Metodos html y html valor en jQuery
-Metodos addClass y removeClass en jQuery
-Metodos attr y removeAttr en jQuery
-Metodos text, text valor en jQuery
-Seleccion de elementos con la clase CSS definida
-Seleccion de elementos utilizando el selector CSS
-Seleccion de elementos por el tipo de elementos jQ
-Seleccion de un elemento mediante el id jQuery
-Nueva manera de programar JavaScript con jQuery
-Que es el jQuery
-Archivo JavaScript externo
-Propiedad screen del objeto window en java script
-Propiedad location de objeto window en java script
-El objeto window en java script
-Eventos onMouseOver y onMouseOut en java script
-Eventos onFocus y onBlur en java script
-Control TEXTAREA en java script
-Control RADIO en java script
-Control CHECKBOX en java script
-Control PASSWORD en java script
-Controles FORM, BUTTON y TEXT en java script
-Formularios y Eventos en java script
-Clase Math en java script
-Clase String en java script
-Clase Array en java script
-Clase Date en java script
-Programacion orientada a objetos en java script
-Funciones que retornan un valor en java script
-Funciones con parametros en java script
-Funciones en java script
-Estructura repetitiva for en java script
-Estructura repetitiva do while en java script
-Concepto de acumulador en java script
-Estructura repetitiva (while) en java script
-Operadores logicos or en las estructuras java s
-Operadores logicos (and) en las estructuras java s
-Estructuras condicionales anidadas en java script
-Estructuras condicionales compuesta en jaca script
-Estructuras condicionales simples en java script
-Estructuras secuenciales en java script
-Entrada de datos por teclado en java script
-Variables en java script
-Que es JavaScript
-Lectura y escritura de archivos en java
-Entrada y salida estandar en Java
-Programa para contar vocales de un fichero en java
-Convertidor de divisas en java
-Form con una ventana nueva
-Seleccionar un elemento html mediante su id
..............................................................................................................................................................................................................................................
(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