Los últimos tutoriales de desarrollo web
 

Colección seleccione opciones

<Select Object

Ejemplo

Averiguar la cantidad de opciones que hay en una lista desplegable específica:

var x = document.getElementById("mySelect").options.length;

El resultado de x será:

4
Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

La colección de opciones devuelve una colección de todos los <option> elementos de una lista desplegable.

Note: Los elementos de la colección están ordenados como aparecen en el código fuente.

Soporte del navegador

Colección
options Sí Sí Sí Sí Sí

Sintaxis

selectObject .options

propiedades

Propiedad Descripción
length Devuelve el número de <option> elementos de la colección.

Nota: Esta propiedad es de sólo lectura
selectedIndex Establece o devuelve el índice del seleccionado <option> elemento de la colección (starts at 0)

métodos

Método Descripción
[ index ] Devuelve el <option> elemento de la colección con el índice especificado (starts at 0) .

Nota: Devuelve un valor nulo si el número de índice está fuera de rango
[ add( option [, index ]) ] Añade un <option> elemento en la colección en el índice especificado. Si no se especifica un índice, se inserta la opción al final de la colección
item( index ) Devuelve el <option> elemento de la colección con el índice especificado (starts at 0) .

Nota: Devuelve un valor nulo si el número de índice está fuera de rango
namedItem( id ) Devuelve el <option> elemento de la colección con el id especificado.

Nota: Devuelve un valor nulo si el identificador no existe
remove( index ) Elimina la <option> elemento con el índice especificado de la colección

Detalles técnicos

DOM Versión: Nivel básico Objeto Documento 2
Valor de retorno: Un objeto HTMLOptionsCollection, que representa a todos <option> elementos en el <select> elemento. Los elementos de la colección están ordenados como aparecen en el código fuente
Ejemplos

Más ejemplos

Ejemplo

[Índice]

Obtener el texto de la primera opción (index 0) en una lista desplegable:

var x = document.getElementById("mySelect").options[0].text;

El resultado de x será:

Apple
Inténtalo tú mismo "

Ejemplo

item( index )

Obtener el texto de la primera opción (index 0) en una lista desplegable:

var x = document.getElementById("mySelect").options.item(0).text;

El resultado de x será:

Apple
Inténtalo tú mismo "

Ejemplo

namedItem( id )

Obtener el texto de la opción con id = "naranja" en una lista desplegable:

var x = document.getElementById("mySelect").options.namedItem("orange").text;

El resultado de x será:

Orange
Inténtalo tú mismo "

Ejemplo

Añadir un "Kiwi" opción en la posición de índice "1" en una lista desplegable:

var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);
Inténtalo tú mismo "

Ejemplo

Eliminar la opción con el índice de "1" a partir de una lista desplegable:

var x = document.getElementById("mySelect");
x.options.remove(1);
Inténtalo tú mismo "

Ejemplo

Bucle a través de todas las opciones en una lista desplegable, y la salida del texto de cada opción:

var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
    txt = txt + x.options[i].text + "<br>";
}

El resultado de txt será:

Apple
Orange
Pineapple
Banana
Inténtalo tú mismo "

Ejemplo

Elija una opción en la lista desplegable y la salida del texto de la opción seleccionada en un elemento con id = "demo":

var x = document.getElementById("mySelect");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;

El resultado podría ser:

Banana
Inténtalo tú mismo "

Ejemplo

Cambiar las opciones de una lista desplegable en función de la opción seleccionada en otra lista desplegable:

var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];

function ChangeCarList() {
    var carList = document.getElementById("car");
    var modelList = document.getElementById("carmodel");
    var selCar = carList.options[carList.selectedIndex].value;

    while (modelList.options.length) {
        modelList.remove(0);
    }

    var cars = carsAndModels[selCar];
    if (cars) {
        var i;
        for (i = 0; i < cars.length; i++) {
            var car = new Option(cars[i], i);
            modelList.options.add(car);
        }
    }
}
Inténtalo tú mismo "
<Select Object