tutorial pengembangan web terbaru
 

Pilih opsi Koleksi

<Pilih Object

Contoh

Cari tahu berapa banyak pilihan ada di daftar drop-down yang spesifik:

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

Hasil x akan:

4
Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Pilihan koleksi mengembalikan koleksi semua <option> elemen dalam daftar drop-down.

Note: Elemen-elemen dalam koleksi diurutkan seperti yang muncul dalam kode sumber.

Dukungan Browser

Koleksi
options iya nih iya nih iya nih iya nih iya nih

Sintaksis

selectObject .options

properti

Milik Deskripsi
length Mengembalikan jumlah <option> elemen dalam koleksi.

Catatan: Properti ini read-only
selectedIndex Set atau mengembalikan indeks memilih <option> elemen dalam koleksi (starts at 0)

metode

metode Deskripsi
[ index ] Mengembalikan <option> elemen dari koleksi dengan indeks tertentu (starts at 0) .

Catatan: Mengembalikan null jika jumlah indeks berada di luar jangkauan
[ add( option [, index ]) ] Menambahkan <option> elemen ke dalam koleksi pada indeks tertentu. Jika tidak ada indeks yang ditentukan, itu menyisipkan opsi pada akhir koleksi
item( index ) Mengembalikan <option> elemen dari koleksi dengan indeks tertentu (starts at 0) .

Catatan: Mengembalikan null jika jumlah indeks berada di luar jangkauan
namedItem( id ) Mengembalikan <option> elemen dari koleksi dengan id tertentu.

Catatan: Mengembalikan null jika id tidak ada
remove( index ) Menghapus <option> elemen dengan indeks tertentu dari koleksi

Rincian teknis

DOM Versi: Inti Level 2 Document Object
Kembali Nilai: Sebuah HTMLOptionsCollection Object, yang mewakili semua <option> elemen dalam <select> elemen. Unsur-unsur dalam koleksi diurutkan seperti yang muncul dalam kode sumber
contoh

Contoh lebih

Contoh

[Index]

Dapatkan teks opsi pertama (index 0) dalam daftar drop-down:

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

Hasil x akan:

Apple
Cobalah sendiri "

Contoh

item( index )

Dapatkan teks opsi pertama (index 0) dalam daftar drop-down:

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

Hasil x akan:

Apple
Cobalah sendiri "

Contoh

namedItem( id )

Dapatkan teks pilihan dengan id = "orange" di daftar drop-down:

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

Hasil x akan:

Orange
Cobalah sendiri "

Contoh

Tambahkan "Kiwi" pilihan pada posisi index "1" dalam daftar drop-down:

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

Contoh

Hapus pilihan dengan indeks "1" dari daftar drop-down:

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

Contoh

Loop melalui semua pilihan dalam daftar drop-down, dan output teks dari 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>";
}

Hasil txt akan:

Apple
Orange
Pineapple
Banana
Cobalah sendiri "

Contoh

Pilih opsi dalam daftar drop-down dan output teks opsi yang dipilih dalam sebuah elemen dengan id = "demo":

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

Hasilnya bisa menjadi:

Banana
Cobalah sendiri "

Contoh

Ubah opsi dalam daftar drop-down, tergantung pada opsi yang dipilih dalam daftar drop-down yang lain:

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);
        }
    }
}
Cobalah sendiri "
<Pilih Object