kumpulan pilihan Select

Objek DOM Select HTML

definisi dan penggunaan

options kumpulan yang mengembalikan semua pilihan dalam daftar turun elemen <option> kumpulan.

Note:Elemen dalam kumpulan diurutkan menurut urutan munculnya di kode asal.

Example

Contoh 1

Lihat berapa banyak pilihan di daftar turun yang khusus ini:

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

Cuba sendiri

Hasil x akan adalah:

4

Tip:More examples are provided below the page.

Syntax

selectObject.options

Property

Property Description
length

Return the number of <option> elements in the collection.

Note:This property is read-only
selectedIndex Set or return the index of the selected <option> element in the collection (starting from 0).

Method

Method Description
[index]

Return <option> elemen dengan indeks yang ditentukan (mulai dari 0) dari kumpulan.

Note:Kembali null jika nomor indeks melebihi rentang.
[add(option[,index] Tambah elemen <option> ke indeks yang ditentukan di dalam kumpulan. Jika indeks tidak ditentukan, pilihan akan disisipkan di akhir kumpulan.
item(index)

Return <option> elemen dengan indeks yang ditentukan (mulai dari 0) dari kumpulan.

Note:Kembali null jika nomor indeks melebihi rentang.
namedItem(id)

Return <option> elemen dengan ID yang ditentukan dari kumpulan.

Note:If id Kembali null jika tidak ada.
remove(index) Remove <option> elemen dengan indeks yang ditentukan dari kumpulan.

Technical details

DOM version: Core Level 2 Document Object
Return value:

HTMLOptionsCollection objek, mewakili semua elemen <option> dalam <select> elemen.

Elemen dalam kumpulan diurutkan menurut urutan munculnya di kode asal.

More examples

Contoh 2: [index]

Dapatkan teks pilihan pertama di daftar turun (indeks 0):

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

Cuba sendiri

Hasil x akan adalah:

Apel

Contoh 3: item(index)

Dapatkan teks pilihan pertama di daftar turun (indeks 0):

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

Cuba sendiri

Hasil x akan adalah:

Apel

Contoh 4: namedItem(id)

Dapatkan teks pilihan id="orange" di daftar turun:

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

Cuba sendiri

Hasil x akan adalah:

Jeruk

Contoh 5

Tambah pilihan 'Kiwi' di posisi indeks daftar turun '1':

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

Cuba sendiri

Contoh 6

Hapus pilihan dengan indeks "1" dari daftar turun:

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

Cuba sendiri

Contoh 7

Lakukan perulangan melintasi semua pilihan dalam daftar turun dan tampilkan teks setiap pilihan:

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

Cuba sendiri

Hasil x akan adalah:

Apel
Jeruk
Papaya
Pisang

Contoh 8

Pilih satu pilihan dalam daftar turun dan tampilkan teks yang dipilih di elemen dengan id="demo":

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

Cuba sendiri

Hasil x akan adalah:

Pisang

Contoh 9

Ubah pilihan dalam daftar turun menurut pilihan yang dipilih dalam daftar lain:

var keretaDanModel = {};
keretaDanModel['VO'] = ['V70', 'XC60', 'XC90'];
keretaDanModel['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
keretaDanModel['BMW'] = ['M6', 'X5', 'Z3'];
function UbahDaftarKereta() {
  var daftarKereta = document.getElementById("kereta");
  var daftarModel = document.getElementById("modelkereta");
  var selKereta = daftarKereta.options[daftarKereta.selectedIndex].value;
  while (daftarModel.options.length) {
    daftarModel.remove(0);
  }
  var kereta = keretaDanModel[selKereta];
  if (cars) {
    var i;
    for (i = 0; i < cars.length; i++) {
      var car = new Option(cars[i], i);
      modelList.options.add(car);
    }
  }
}

Cuba sendiri

Dukungan Pemelayangan Koleksi options Yes Yes Yes Yes Yes

Objek DOM Select HTML