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
 123456
78910111213
14151617181920
21222324252627
28293031   

Jueves 3 de Julio 2025
Semana 27



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