Najnowsze tutoriale tworzenie stron internetowych
 

Wybierz opcje Collection

<Wybierz obiekt

Przykład

Dowiedzieć się, jak wiele opcji istnieje w określonej listy rozwijanej:

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

Wynikiem X będzie:

4
Spróbuj sam "

Więcej "Try it Yourself" przykłady poniżej.

Definicja i Wykorzystanie

Kolekcja opcje zwraca kolekcję wszystkich <option> elementów w liście rozwijanej.

Note: elementy w kolekcji są klasyfikowane jako wydają w kodzie źródłowym.

Wsparcie przeglądarka

Kolekcja
options tak tak tak tak tak

Składnia

selectObject .options

Nieruchomości

Nieruchomość Opis
length Zwraca liczbę <option> elementów w kolekcji.

Uwaga: Ta właściwość jest tylko do odczytu
selectedIndex Zestawy lub zwraca wskaźnik wybranego <option> elementu w zbiorze (starts at 0)

metody

metoda Opis
[ index ] Zwraca <option> elementu z kolekcji z określonym indeksem (starts at 0) .

Uwaga: Zwraca null, jeśli numer indeksu jest poza zasięgiem
[ add( option [, index ]) ] Dodaje <option> element do kolekcji w określonym indeksie. Jeśli indeks nie jest określona, ​​to wstawia opcję na końcu kolekcji
item( index ) Zwraca <option> elementu z kolekcji z określonym indeksem (starts at 0) .

Uwaga: Zwraca null, jeśli numer indeksu jest poza zasięgiem
namedItem( id ) Zwraca <option> element z kolekcji o podanym identyfikatorze.

Uwaga: Zwraca null, jeśli id nie istnieje
remove( index ) Usuwa <option> element z określonym indeksem z kolekcji

Szczegóły techniczne

DOM wersja: Rdzeń Poziom 2 Document Object
Zwracana wartość: Object HTMLOptionsCollection, reprezentujących wszystkie <option> elementy w <select> elementu. Elementy w kolekcji są klasyfikowane jako wydają w kodzie źródłowym
Przykłady

Więcej przykładów

Przykład

[Indeks]

Uzyskaj tekst pierwszej opcji (index 0) na liście rozwijanej:

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

Wynikiem X będzie:

Apple
Spróbuj sam "

Przykład

item( index )

Uzyskaj tekst pierwszej opcji (index 0) na liście rozwijanej:

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

Wynikiem X będzie:

Apple
Spróbuj sam "

Przykład

namedItem( id )

Uzyskaj tekst opcją id = „orange” w liście rozwijanej:

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

Wynikiem X będzie:

Orange
Spróbuj sam "

Przykład

Dodaj "Kiwi" opcję w pozycji indeksu "1" na liście rozwijanej:

var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);
Spróbuj sam "

Przykład

Usuń opcję z indeksu "1" z listy rozwijanej:

var x = document.getElementById("mySelect");
x.options.remove(1);
Spróbuj sam "

Przykład

Pętli wszystkich opcji na liście rozwijanej, a wyjście tekst każdej z opcji:

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

Wynikiem txt będą:

Apple
Orange
Pineapple
Banana
Spróbuj sam "

Przykład

Wybierz odpowiednią opcję z listy rozwijanej i wysyła tekst wybranej opcji w elemencie z id = „demo”:

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

Rezultatem mogą być:

Banana
Spróbuj sam "

Przykład

Zmiana opcji na liście rozwijanej w zależności od wybranej opcji w innej listy rozwijanej:

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);
        }
    }
}
Spróbuj sam "
<Wybierz obiekt