En son web geliştirme öğreticiler
 

Seçme seçenekleri Koleksiyonu

<Select Object

Örnek

Belirli açılan listede kaç seçenek öğrenin:

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

X'in sonucu olacaktır:

4
Kendin dene "

Daha "Try it Yourself" Aşağıdaki örnekler.

Tanımı ve Kullanımı

Seçenekleri koleksiyonu tüm koleksiyonunu döndürür <option> açılan listesinde elemanları.

Note: bunlar kaynak kodunda göründükleri gibi koleksiyonunda elemanları sıralanır.

Tarayıcı Desteği

Toplamak
options Evet Evet Evet Evet Evet

Sözdizimi

selectObject .options

Özellikleri

özellik Açıklama
length Sayısını döndürür <option> koleksiyonunda elemanları.

Not: Bu özellik salt okunur
selectedIndex Ayarlar veya seçilen dizinini döndürür <option> koleksiyonunda elemanı (starts at 0)

Yöntemler

Yöntem Açıklama
[ index ] İade <option> Belirtilen dizini ile koleksiyonundan eleman (starts at 0) .

Not: dizin numarası aralık dışında ise boş sonucunu döndürür
[ add( option [, index ]) ] Bir ekler <option> koleksiyon adresinde belirtilen dizini içine eleman. Hiçbir dizin belirtilmemişse, bu koleksiyonun sonundaki seçeneği ekler
item( index ) İade <option> Belirtilen dizini ile koleksiyonundan eleman (starts at 0) .

Not: dizin numarası aralık dışında ise boş sonucunu döndürür
namedItem( id ) İade <option> Belirtilen kimliğe sahip koleksiyonundan elemanı.

Not: id yoksa boş sonucunu döndürür
remove( index ) Kaldırır <option> koleksiyonundan belirtilen indeksi elemanı

Teknik detaylar

DOM Versiyon: Çekirdek Düzey 2 Belge Nesne
Geri dönüş değeri: Bütün temsil eden bir HTMLOptionsCollection Nesne, <option> öğeleri <select> elemanı. onlar kaynak kodunda göründükleri gibi koleksiyonunda elemanları sıralanır
Örnekler

Diğer Örnekler

Örnek

[Göstergesi]

İlk seçeneğin metni alın (index 0) açılan listede:

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

X'in sonucu olacaktır:

Apple
Kendin dene "

Örnek

item( index )

İlk seçeneğin metni alın (index 0) açılan listede:

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

X'in sonucu olacaktır:

Apple
Kendin dene "

Örnek

namedItem( id )

bir açılır listede id = "turuncu" ile seçeneğinin metnini alın:

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

X'in sonucu olacaktır:

Orange
Kendin dene "

Örnek

Bir ekleme "Kiwi" dizin konumundaki seçeneği "1" açılan listede:

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

Örnek

Endeks ile seçeneğini kaldırın "1" açılan listeden:

var x = document.getElementById("mySelect");
x.options.remove(1);
Kendin dene "

Örnek

bir açılır listedeki tüm seçenekleri arasında döngü ve çıkış her seçeneğin metni:

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

Txt sonucu olacaktır:

Apple
Orange
Pineapple
Banana
Kendin dene "

Örnek

Açılır listeden ve çıkış id = "demo" sahip bir öğenin seçilen seçeneğin metni içinde bir seçenek belirleyin:

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

sonucu olabilir:

Banana
Kendin dene "

Örnek

Başka bir açılan listeden seçilen seçeneğe bağlı olarak bir açılır listede seçeneklerini değiştirme:

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);
        }
    }
}
Kendin dene "
<Select Object