Kumpulan Select options

Objek DOM Select HTML

Definisi dan penggunaan

options Kumpulan yang mengembalikan semua Element <option> dari kumpulan.

Keterangan:Elemen di dalam kumpulan diurutkan berdasarkan urutan munculnya di kode asal.

Contoh

Contoh 1

Lihat berapa banyak opsi ada di dalam daftar pilihan yang khusus:

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

Coba Sendiri

Hasil x akan menjadi:

4

Petunjuk:Beberapa contoh lain disediakan di bawah halaman ini.

Sintaks

selectObject.options

Properti

Properti Deskripsi
length

Kembalikan jumlah elemen <option> di dalam kumpulan.

Keterangan:Properti ini hanya baca.
selectedIndex Setel atau kembalikan indeks opsi yang dipilih di dalam kumpulan (dari 0).

Metode

Metode Deskripsi
[index]

Kembalikan elemen <option> dengan indeks yang ditentukan (dari 0).

Keterangan:Jika nomor indeks melebihi batas, kembalikan null.
[add(option[,index] Tambahkan elemen <option> ke posisi indeks yang ditentukan di dalam kumpulan. Jika indeks tidak ditentukan, opsi akan disisipkan di akhir kumpulan.
item(index)

Kembalikan elemen <option> dengan indeks yang ditentukan (dari 0).

Keterangan:Jika nomor indeks melebihi batas, kembalikan null.
namedItem(id)

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

Keterangan:Jika id Jika tidak ada, kembalikan null.
remove(index) Hapus elemen <option> dengan indeks yang ditentukan dari kumpulan.

Detil teknis

Versi DOM: Core Level 2 Document Object
Nilai kembalian:

Objek HTMLOptionsCollection, yang mewakili semua elemen <option> di dalam elemen <select>.

Elemen di dalam kumpulan diurutkan berdasarkan urutan munculnya di kode asal.

Beberapa contoh lain

Contoh 2: [index]

Ambil teks opsi pertama di dalam daftar pilihan (indeks 0):

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

Coba Sendiri

Hasil x akan menjadi:

Apple

Contoh 3: item(index)

Ambil teks opsi pertama di dalam daftar pilihan (indeks 0):

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

Coba Sendiri

Hasil x akan menjadi:

Apple

Contoh 4: namedItem(id)

Ambil teks opsi yang ada di dalam daftar pilihan dengan id="orange":

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

Coba Sendiri

Hasil x akan menjadi:

Orange

Contoh 5

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

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

Coba Sendiri

Contoh 6

Hapus opsi yang berindeks "1" dari daftar pilihan:

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

Coba Sendiri

Contoh 7

Lakukan perulangan melalui semua opsi dalam daftar pilihan dan tampilkan teks masing-masing opsi:

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

Coba Sendiri

Hasil x akan menjadi:

Apple
Orange
Pineapple
Banana

Contoh 8

Pilih opsi dalam daftar pilihan 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;

Coba Sendiri

Hasil x akan menjadi:

Banana

Contoh 9

Ubah opsi dalam daftar pilihan berdasarkan opsi yang dipilih dalam daftar pilihan lainnya:

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);
    }
  }
}

Coba Sendiri

Dukungan Browser Koleksi options Yes Yes Yes Yes Yes

Objek DOM Select HTML