Ultimele tutoriale de dezvoltare web
 

Selectați opțiunile de colectare

<Selectare obiect

Exemplu

Aflați cât de multe opțiuni există într-o anumită listă drop-down:

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

Rezultatul x va fi:

4
Încearcă - l singur »

Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.

Definiție și utilizare

Colecția opțiuni returnează o colecție de toate <option> elemente dintr - o listă drop - down.

Note: Elementele din colecție sunt sortate așa cum apar în codul sursă.

Suport pentru browser-

Colectie
options da da da da da

Sintaxă

selectObject .options

Proprietăți

Proprietate Descriere
length Returnează numărul de <option> elemente din colecție.

Notă: Această proprietate este read-only
selectedIndex Setează sau returnează indicele selectat <option> Elementul din colecție (starts at 0) de (starts at 0)

metode

Metodă Descriere
[ index ] Returnează <option> elementul din colecția cu indicele specificat (starts at 0) de (starts at 0) .

Notă: Returnează null dacă numărul de index este în afara intervalului
[ add( option [, index ]) ] Adaugă o <option> elementul în colecția de la indexul specificat. Dacă nu este specificat nici un index, acesta introduce opțiunea la sfârșitul colecției
item( index ) Returnează <option> elementul din colecția cu indicele specificat (starts at 0) de (starts at 0) .

Notă: Returnează null dacă numărul de index este în afara intervalului
namedItem( id ) Returnează <option> elementul din colecția cu id - ul specificat.

Nota: returneaza null daca id - ul nu există
remove( index ) Elimină <option> elementul cu indexul specificat din colecția

Detalii tehnice

DOM Versiune: Nivelul Core 2 Document Object
Întoarcere Valoare: Un obiect HTMLOptionsCollection, reprezentând toate <option> elemente în <select> element. Elementele din colecție sunt sortate așa cum apar în codul sursă
Exemple

Mai multe exemple

Exemplu

[Index]

Ia textul prima opțiune (index 0) într - o listă drop - down:

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

Rezultatul x va fi:

Apple
Încearcă - l singur »

Exemplu

item( index )

Ia textul prima opțiune (index 0) într - o listă drop - down:

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

Rezultatul x va fi:

Apple
Încearcă - l singur »

Exemplu

namedItem( id )

Ia textul opțiunii cu id = „portocaliu“ într-o listă drop-down:

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

Rezultatul x va fi:

Orange
Încearcă - l singur »

Exemplu

Adăugați un "Kiwi" opțiune de la poziția de index "1" într - o listă drop - down:

var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);
Încearcă - l singur »

Exemplu

Îndepărtați opțiunea cu indexul "1" dintr - o listă drop - down:

var x = document.getElementById("mySelect");
x.options.remove(1);
Încearcă - l singur »

Exemplu

Buclă prin toate opțiunile dintr-o listă verticală, și de ieșire textul fiecărei opțiuni:

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

Rezultatul txt va fi:

Apple
Orange
Pineapple
Banana
Încearcă - l singur »

Exemplu

Alegeți o opțiune din lista verticală și de ieșire textul opțiunii selectate într-un element cu id = „demo“:

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

Rezultatul ar putea fi:

Banana
Încearcă - l singur »

Exemplu

Modificarea opțiunilor într-o listă derulantă în funcție de opțiunea selectată într-o altă listă drop-down:

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);
        }
    }
}
Încearcă - l singur »
<Selectare obiect