Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengetahui indeks nilai yang dipilih dalam kotak drop-down dalam javascript
JavaScript ialah bahasa skrip yang digunakan secara meluas dalam pembangunan web. Antaranya, kotak drop-down (senarai juntai bawah) ialah kawalan yang biasa digunakan dalam pembangunan halaman, yang digunakan untuk membolehkan pengguna memilih nilai daripada satu siri pilihan yang telah ditetapkan. Dalam JavaScript, kita biasanya perlu memproses nilai yang dipilih oleh pengguna, jadi kita perlu mengetahui indeks nilai yang dipilih dalam kotak lungsur. Artikel ini akan memperkenalkan secara terperinci cara mendapatkan indeks nilai yang dipilih dalam kotak lungsur dalam JavaScript.
1. Penggunaan asas kotak lungsur
Kotak lungsur ditakrifkan dalam HTML dengan teg
<select id="mySelect"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
Terdapat 4 pilihan dalam kotak lungsur ini Nilai dan teks paparan bagi setiap pilihan ialah "volvo", "Volvo", ". saab", " Saab", "opel", "Opel", "audi", "Audi". Antaranya, atribut nilai mentakrifkan nilai pilihan Jika atribut nilai tidak dinyatakan, nilai pilihan lalai ialah teks yang dipaparkan. Pilihan lalai yang dipilih dalam kotak lungsur ialah pilihan pertama, "Volvo".
Dalam JavaScript, anda boleh mendapatkan elemen kotak lungsur turun melalui kaedah getElementById():
var selectElement = document.getElementById("mySelect");
2 Dapatkan indeks pilihan yang dipilih
Dapatkan indeks pilihan yang dipilih dalam kotak drop-down Terdapat banyak kaedah untuk pengindeksan, dan kaedah ini diperkenalkan di bawah.
sifat SelectedIndex mengembalikan indeks pilihan yang dipilih. Secara lalai, nilai atribut SelectIndex ialah 0, yang merupakan pilihan pertama. Kita boleh menukar pilihan yang dipilih dengan menukar nilai atribut selectedIndex.
Andaikan kita ingin mendapatkan indeks pilihan yang dipilih dalam kotak lungsur, kita boleh menulis seperti ini:
var selectElement = document.getElementById("mySelect"); var selectedOptionIndex = selectElement.selectedIndex;
atribut nilai mengembalikan nilai pilihan yang dipilih. Kita boleh mendapatkan indeks pilihan yang dipilih melalui atribut SelectIndex, dan kemudian mendapatkan nilai pilihan.
Andaikan kita ingin mendapatkan nilai dan indeks pilihan yang dipilih dalam kotak lungsur, kita boleh menulis seperti ini:
var selectElement = document.getElementById("mySelect"); var selectedOptionIndex = selectElement.selectedIndex; var selectedOptionValue = selectElement.options[selectedOptionIndex].value;
koleksi pilihan Mengandungi semua teg
Andaikan kita ingin mendapatkan nilai dan indeks semua pilihan dalam kotak lungsur, kita boleh menulis seperti ini:
var selectElement = document.getElementById("mySelect"); for(var i = 0; i < selectElement.options.length; i++) { var optionValue = selectElement.options[i].value; var optionIndex = i; }
Ringkasan
Dalam JavaScript, dapatkan kotak lungsur Terdapat banyak cara untuk mengindeks nilai yang dipilih, termasuk menggunakan atribut SelectIndex, atribut nilai dan koleksi pilihan. Antaranya, atribut selectedIndex mengembalikan indeks pilihan yang dipilih, atribut nilai mengembalikan nilai pilihan yang dipilih dan koleksi pilihan mengandungi maklumat tentang semua pilihan. Kaedah yang berbeza sesuai untuk jenis senario aplikasi yang berbeza, dan kita boleh memilih kaedah yang sesuai untuk melaksanakan fungsi mengikut situasi sebenar.
Atas ialah kandungan terperinci Bagaimana untuk mengetahui indeks nilai yang dipilih dalam kotak drop-down dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!