Gli ultimi tutorial di sviluppo web
 

Collezione Selezionare le opzioni

<Seleziona oggetto

Esempio

Scopri quante opzioni ci sono in una specifica elenco a discesa:

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

Il risultato di x sarà:

4
Prova tu stesso "

Più "Try it Yourself" esempi di seguito.

Definizione e l'utilizzo

La collezione opzioni restituisce un insieme di tutte le <option> elementi in un elenco a discesa.

Note: Gli elementi della collezione sono ordinati come appaiono nel codice sorgente.

Supporto browser

Collezione
options sì sì sì sì sì

Sintassi

selectObject .options

Proprietà

Proprietà Descrizione
length Restituisce il numero di <option> elementi della collezione.

Nota: questa proprietà è di sola lettura
selectedIndex Imposta o restituisce l'indice selezionato <option> elemento della collezione (starts at 0)

metodi

Metodo Descrizione
[ index ] Restituisce il <option> elemento della collezione con l'indice specificato (starts at 0) .

Nota: Restituisce null se il numero di indice è fuori portata
[ add( option [, index ]) ] Aggiunge un <option> elemento nella collezione in corrispondenza dell'indice specificato. Se non viene specificato alcun indice, inserisce l'opzione alla fine della raccolta
item( index ) Restituisce il <option> elemento della collezione con l'indice specificato (starts at 0) .

Nota: Restituisce null se il numero di indice è fuori portata
namedItem( id ) Restituisce il <option> elemento della collezione con l'ID specificato.

Nota: restituisce null se l'ID non esiste
remove( index ) Rimuove il <option> elemento con l'indice specificato dalla raccolta

Dettagli tecnici

DOM Versione: Nucleo livello di oggetto di documento 2
Valore di ritorno: Un oggetto HTMLOptionsCollection, in rappresentanza di tutti <option> elementi del <select> elemento. Gli elementi della collezione sono ordinati come appaiono nel codice sorgente
Esempi

Altri esempi

Esempio

[Index]

Prendi il testo della prima opzione (index 0) in un elenco a discesa:

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

Il risultato di x sarà:

Apple
Prova tu stesso "

Esempio

item( index )

Prendi il testo della prima opzione (index 0) in un elenco a discesa:

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

Il risultato di x sarà:

Apple
Prova tu stesso "

Esempio

namedItem( id )

Ottenere il testo dell'opzione con id = "orange" in un elenco a discesa:

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

Il risultato di x sarà:

Orange
Prova tu stesso "

Esempio

Aggiungi un "Kiwi" opzione alla posizione di indice "1" in un elenco a discesa:

var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);
Prova tu stesso "

Esempio

Rimuovere l'opzione con indice "1" da un elenco a discesa:

var x = document.getElementById("mySelect");
x.options.remove(1);
Prova tu stesso "

Esempio

Loop attraverso tutte le opzioni in un elenco a discesa, e l'uscita del testo di ciascuna opzione:

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

Il risultato di txt sarà:

Apple
Orange
Pineapple
Banana
Prova tu stesso "

Esempio

Scegliere un'opzione nell'elenco a discesa e uscita il testo dell'opzione selezionata in un elemento con id = "demo":

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

Il risultato potrebbe essere:

Banana
Prova tu stesso "

Esempio

Modificare le opzioni in un elenco a discesa a seconda dell'opzione selezionata in un altro elenco a discesa:

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);
        }
    }
}
Prova tu stesso "
<Seleziona oggetto