Select options set

HTML DOM Select nesnesi

Definition and usage

options Set returns all the options in the drop-down list Option element koleksiyonu.

Açıklama:Koleksiyondaki elemanlar, kaynak kodunda ortaya çıktıkları sırayla sıralanır.

Örnek

Örnek 1

Belirli bir açılır listede ne kadar seçenek olduğunu gör:

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

Kişisel olarak deneyin

x'nin sonucu şu olacak:

4

İpucu:Daha fazla örnek, sayfanın altında sağlanmıştır.

Sözdizimi

selectObject.options

Özellik

Özellik Açıklama
length

Koleksiyondaki <option> elementlerinin sayısını döndürür.

Açıklama:Bu özellik yalnızca okunabilir.
selectedIndex Koleksiyondaki seçili <option> elementinin indeksini (0'dan başlayarak) ayarlar veya döndürür.

Metod

Metod Açıklama
[index]

Belirtilen indeksdeki (0'dan başlayarak) <option> elementini koleksiyondan döndür.

Açıklama:İndeks numarası aralığın dışında ise null döner.
[add(option[,index] <option> elementini koleksiyondaki belirtilen indeks konumuna ekler. Belirtilmemişse, seçeneği koleksiyonun sonuna ekler.
item(index)

Belirtilen indeksdeki (0'dan başlayarak) <option> elementini koleksiyondan döndür.

Açıklama:İndeks numarası aralığın dışında ise null döner.
namedItem(id)

Belirtilen ID'li <option> elementini koleksiyondan döndür.

Açıklama:Eğer id Bulunamazsa null döner.
remove(index) Belirtilen indeksdeki <option> elementini koleksiyondan kaldır.

Teknik ayrıntılar

DOM sürümü: Core Level 2 Document Object
Dönüş değeri:

HTMLOptionsCollection nesnesi, <select> elementindeki tüm <option> elementlerini temsil eder.

Koleksiyondaki elemanlar, kaynak kodunda ortaya çıktıkları sırayla sıralanır.

Daha fazla örnek

Örnek 2: [index]

İlk seçeneğin (0 indeks) metnini al:

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

Kişisel olarak deneyin

x'nin sonucu şu olacak:

Elma

Örnek 3: item(index)

İlk seçeneğin (0 indeks) metnini al:

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

Kişisel olarak deneyin

x'nin sonucu şu olacak:

Elma

Örnek 4: namedItem(id)

id="orange" olan seçenekteki metni al:

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

Kişisel olarak deneyin

x'nin sonucu şu olacak:

Nar

Örnek 5

Açılır listedeki indeks konumunda “1” yerinde “Kiwi” seçeneği ekle:

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

Kişisel olarak deneyin

Örnek 6

Aşağıdaki listeden "1" indeksli seçeneği silin:

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

Kişisel olarak deneyin

Örnek 7

Aşağıdaki listedeki tüm seçenekleri dolaşın ve her bir seçeneğin metnini yazdırın:

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

Kişisel olarak deneyin

x'nin sonucu şu olacak:

Elma
Nar
Ananas
Muz

Örnek 8

Aşağıdaki listeden bir seçenek seçin ve seçili seçeneğin metnini id="demo" olan elemanına yazdırın:

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

Kişisel olarak deneyin

x'nin sonucu şu olacak:

Muz

Örnek 9

Diğer bir aşağıdaki listedeki seçili seçenekleri kullanarak aşağıdaki listedeki seçenekleri değiştirin:

var arabalarVeModeller = {};
arabalarVeModeller['VO'] = ['V70', 'XC60', 'XC90'];
arabalarVeModeller['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
arabalarVeModeller['BMW'] = ['M6', 'X5', 'Z3'];
function DegisArabaListesi() {
  var arabalarList = document.getElementById("araba");
  var modelList = document.getElementById("arabamodel");
  var seciliAraba = arabalarList.options[arabalarList.selectedIndex].value;
  while (modelList.options.length) {
    modelList.remove(0);
  }
  var arabalar = arabalarVeModeller[seciliAraba];
  if (cars) {
    var i;
    for (i = 0; i < cars.length; i++) {
      var car = new Option(cars[i], i);
      modelList.options.add(car);
    }
  }
}

Kişisel olarak deneyin

Tarayıcı Desteği Collection options Yes Yes Yes Yes Yes

HTML DOM Select nesnesi