Los objetos select y option

Sintaxis, propiedades y eventos principales asociados a estos elementos de formulario.

07/5/04 -

15.1 SELECT: Propiedades principales

 

propiedad	descripción
name	nombre del select
size	establece la cantidad de opciones que a primera vista se verán en el select
option	es la principal propiedad ya que permite acceder a cada opción del select.
disabled	si su valor es "true", bloquea el select y no permite realizar ningún tipo de selección. Si su valor es "false" contrarresta el efecto anterior.
multiple	permite al usuario seleccionar más de una opción (mediante la tecla Ctrl)
type	informa si el select es del tipo multiple o simple.

 

15.2 SELECT: Sintaxis básica

 

<select name="nombre" size="3" multiple>

<option value="valor 1">Texto de opción 1</option>

<option value="valor 2" selected>Texto de opción 2</option>

<option value="valor 3">Texto de opción 3</option>

<option value="valor 4">Texto de opción 4</option>

</select>

Muestra (selección múltiple):

 

Texto de opción 1 Texto de opción 2 Texto de opción 3 Texto de opción 4

manteniendo apretada la tecla Ctrl (control) puede seleccionarse más de una opción

 

Muestra (selección simple):

 

Texto de opción 1 Texto de opción 2 Texto de opción 3 Texto de opción 4

valor de size "3"

 

Texto de opción 1 Texto de opción 2 Texto de opción 3 Texto de opción 4

valor de size "1"

solo puede seleccionarse una opción en cualquiera de los dos casos

15.3 SELECT: Métodos del objeto

 

método	descripción
focus	coloca el foco en el select

 

15.4 SELECT: Eventos del objeto

 

evento	descripción
onFocus	se produce al colocar el foco en el select
onBlur	se produce al abandonar el select (al quitar el foco)
onChange	se produce al realizar un cambio de selección

 

15.5 OPTION: Propiedades principales

 

propiedad	descripción
value	valor asociado a cada opción del select. Es invisible al usuario pero es el valor que se envía junto al formulario.
text	es el texto que ve el usuario que se encuentra contenido entre las etiquetas <option> y </option>
selected	indica si una opción está seleccionada.
selectedIndex	Da acceso a la opción (option) que ha seleccionado el usuario.
index	al igual que en form, o checkbox, este array contiene todas las opciones pertenecientes a un select y tambien comienza por 0.
length	Cuenta la cantidad de opciones (option) que conforman un select

 

15.6 OPTION: Métodos y eventos

El objeto option no posee métodos ni eventos propios.

 

15.7 Sintaxis básica general: llamando a las propiedades

En la siguiente lista veremos la forma correcta de llamar a cada propiedad en ambos objetos.

 

PROPIEDAD	OBJETO	SINTAXIS
name	SELECT	nombre_formulario.nombre_select.name
size	SELECT	nombre_formulario.nombre_select.size
option	SELECT	nombre_formulario.nombre_select.options[index] se refiere a una opción específica   formulario.select.options[formulario.select.selectedIndex].propiedad se refiere a la opción seleccionada por el usuario
disabled	SELECT	nombre_formulario.nombre_select.disabled = true/false
multiple	SELECT	nombre_formulario.nombre_select.multiple = true/false
type	SELECT	nombre_formulario.nombre_select.type
value	OPTION	nombre_formulario.nombre_select.options[index].value se refiere a una opción específica   formulario.select.options[formulario.select.selectedIndex].value se refiere a la opción seleccionada por el usuario
text	OPTION	nombre_formulario.nombre_select.options[index].text
selected	OPTION	nombre_formulario.nombre_select.options[index].selected = true/false
selectedIndex	OPTION	formulario.select.options[formulario.select.selectedIndex].propiedad
index	OPTION	nombre_formulario.nombre_select.options[index]
length	OPTION	nombre_formulario.nombre_select.options.length

 

15.8 El constructor new Option

Este constructor nos permite introducir nuevas opciones dentro de un select. Su sintaxis básica es la siguiente:

 

variable = new Option("text","value","defaultSelected","selected")

 

Para introducir esta nueva opción en un select se debe usar la siguiente sintaxis:

 

nombre_formulario.nombre_select.options[index] = variable

 

Para borrar una opción existente de un select la sintaxis es la siguiente:

 

nombre_formulario.nombre_select.options[index] = null

+ 1 manual relacionado
+ 1 categoria relacionada
+ 1 comentario no revisado

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

Informe de Eugenia Bahit* Desarrolladora ASP y PHP URL: http://www.cmzk.com.ar Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * 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

+ Entrar en Scripts en Javascript

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 ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba