Control de campos select con Javascript

15/1/03 - El objeto select de un formulario es una de esas listas desplegables que nos permiten seleccionar un elemento. Se despliegan apretando sobre una flecha, a continuación se puede escoger un elemento y para acabar se vuelven a plegar. Se puede ver un elemento select de un formulario a continuación.

Uno de estos elementos se puede obtener utilizando la etiqueta <SELECT> dentro de un formulario. A la etiqueta le podemos añadir un atributo para darle el nombre, NAME, para luego acceder a ese campo mediante Javascript. Para expresar cada una de las posibles opciones del campo select utilizamos una etiqueta <OPTION> a la que le introducimos un atributo VALUE para expresar su valor. El texto que colocamos después de la etiqueta <OPTION> sirve como etiqueta de esa opción, es el texto que ve el usuario asociado a esa opción.

Propiedades del objeto select

Vamos a ver una lista de las propiedades de este elemento de formulario.

length
Guarda la cantidad de opciones del campo select. Cantidad de etiquetas <OPTION>

Option
Hace referencia a cada una de sus opciones. Son por si mismas objetos.

options
Un array con cada una de las opciones del select.

selectedIndex
Es el índice de la opción que se encuentra seleccionada.

Aparte de las conocidas propiedades comunes a todos los elementos de formulario: form y name y type.

Métodos del objeto select

Los métodos son solamente 2 y ya conocemos su significado.

blur()
Para retirar el foco de la aplicación de ese elemento de formulario.

focus()
Para poner el foco de la aplicación.

Objeto option

Tenemos que pararnos a ver también este objeto para entender bien el campo select. Recordamos que las option son las distintas opciones que tiene un select, expresadas con la etiqueta <OPTION>.

Propiedades de option

Estos objetos sólo tienen propiedades, no tienen métodos. Vamos a verlas.

defaultSelected
Indica con un true o un false si esa opción es la opción por defecto. La opción por defecto se consigue con HTML colocando el atributo selected a un option.

index
El índice de esa opción dentro del select.

selected
Indica si esa opción se encuentra seleccionada o no.

text
Es el texto de la opción. Lo que puede ver el usuario en el select, que se escribe después de la etiqueta <OPTION>.

value
Indica el valor de la opción, que se introduce con el atributo VALUE de la etiqueta <OPTION>.

Ejemplo de acceso a un select

Vamos a ver un ejemplo sobre cómo se accede a un select con Javascript, como podemos acceder a sus distintas propiedades y a la opción seleccionada.

Vamos a empezar viendo el formulario que tiene el select con el que vamos a trabajar. Es un select que sirve para valorar el web que estamos visitando.

<form name="fomul">
Valoración sobre este web:
<select name="miSelect">
<option value="10">Muy bien
<option value="5" selected>Regular
<option value="0">Muy mal
</select>
<br>
<br>
<input type=button value="Dime propiedades" onclick="dimePropiedades()">
</form>

Ahora vamos a ver una función que recoge las propiedades más significativas del campo select y las presenta en una caja alert.

function dimePropiedades(){
    var texto
    texto = "El numero de opciones del select: " + document.formul.miSelect.length
    var indice = document.formul.miSelect.selectedIndex
    texto += "\nIndice de la opcion escogida: " + indice
    var valor = document.formul.miSelect.options[indice].value
    texto += "\nValor de la opcion escogida: " + valor
    var textoEscogido = document.formul.miSelect.options[indice].text
    texto += "\nTexto de la opcion escogida: " + textoEscogido
    alert(texto)
}

Esta función crea una variable de texto donde va introduciendo cada una de las propiedades del select. La primera contiene el valor de la propiedad length del select, la segunda el índice de la opción seleccionada y las dos siguientes contienen el valor y el texto de la opción seleccionada. Para acceder a la opción seleccionada utilizamos el array options con el índice recogido en las segunda variable.

Podemos ver el ejemplo en funcionamiento aquí.

Podemos ver un ejemplo más practico sobre qué se puede hacer con un campo select en el reportaje de cómo hacer un navegador desplegable con Javascript.

Propiedad value de un objeto select

Para acceder al valor seleccionado de un campo select podemos utilizar la propiedad value del campo select en lugar de acceder a partir del vector de options.

Para el anterior formulario sería algo parecido a esto.

formul.miSelect.value

Sin embargo, esta propiedad sólo está presente en navegadores Internet Explorer, por lo que es recomendable acceder utilizando el vector de options con el índice de la posición seleccionada si deseamos que la página sea compatible con todos los navegadores. Hemos querido añadir este punto para que, si alguna vez utilizamos o vemos utilizar este método de acceso, sepamos su pega y porque es mejor utilizar el vector de options.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 2 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba