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 pilihan. Kotak lungsur mudah boleh ditulis seperti ini:

<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.

1. sifat SelectedIndex

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;

2. atribut nilai

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;

3. koleksi pilihan

koleksi pilihan Mengandungi semua teg kita boleh mendapatkan pilihan khusus melalui koleksi pilihan, dan kemudian mendapatkan indeks dan nilai pilihan.

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!