Los objetos select y option

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

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):

 

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

 

Muestra (selección simple):

 

valor de size "3"

 

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

Autor

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Compartir

Comentarios

alan

06/9/2007
Muy bueno, bien detallado.

Gracias.

mary

15/9/2009
list/menu y options
esta muy interesante el articulo, qisiera pedir ayuda para algo. tengo un lista/menu y 2 option

Qiero qe los 2 option siempre esten bloqueados y solo se habiliten cuando elijo cualquier elemento de la lista menos uno qe dice "todos". cuando elija TOdos, qe se bloqueen los 2 option........... de ante mano gracias

paulo

04/5/2010
Objeto select
Hola quiero saber como se lee una selección realizada por el usuario en en el mismo formularios antes de enviarlo. quizas con java scrip?
desde ya muchas gracias

debuccafusca

31/7/2011
Reforzar los datos
Los datos que desarrollan son muy buenos, lo que yo necesito es si hay otro texto en el cual me muestre como hacer que de un grupo de registros en mysql, que se toman en un select, se seleccione uno para ser visto como pricipal, normalmente es el primero, pero yo necesito que sea otro a seleccion.
Sin otro particular, saludo a ustedes muy atentamente.

ernestosoto

01/8/2011
Marcar la opcion selecionada por defecto
Eso lo haces desde el html con el atributo selected en el option q quieras

Sonia

12/10/2011
Mensaje
Muy buen articulo muchas gracias

owned

28/11/2011
Muy porfavor
Hola alguien podria hacer un ejemplo de ese menu desplegable .. es decir algo asi..
http://cinestrenos-tv2.webs.com/canalesnacionales.htm
y poner el descargable?
lo agradeceria MUCHISIMO.
Muchas gracias :)

31341303P

20/1/2013
select
Me gustaría ver un ejemplo real de uso del constructor new option(). Gracias.

eduardo

23/4/2013
select dinamicos en asp
Hola soy programador novato en asp y html, mi inquietud es como puedo hacer q 1 select html puedan cargar datos dependiendo d la opcion seleccionada x el usuario en el 1er select si la obligacion d hacer sumit a la pagina, agradezco tus comentarios y ejemplos q me ayuden a ilustrar tu repuesta

saludos