Bagaimana untuk Mendapatkan Nilai Terpilih Daripada Elemen Pelbagai Pilihan dalam JavaScript?

Mendapatkan Nilai Daripada Pelbagai Elemen Pilihan

Apabila berurusan dengan elemen bentuk yang menampilkan berbilang pilihan, tugas biasa melibatkan mengekstrak nilai yang dipilih. Ini amat relevan untuk senario di mana anda perlu menangkap keutamaan atau pilihan pengguna.

Teknik JavaScript untuk Mengekstrak Nilai Terpilih

Untuk mendapatkan semula nilai yang dipilih daripada elemen dengan atribut berbilang, JavaScript menyediakan pendekatan yang mudah:

<code class="javascript">function getSelectValues(select) {
  var values = [];
  for (var i = 0; i < select.options.length; i++) {
    if (select.options[i].selected) {
      values.push(select.options[i].value || select.options[i].text);
    }
  }
  return values;
}

Fungsi ini berulang melalui pilihan elemen dan mengenal pasti pilihan yang dipilih. Jika pilihan dipilih, fungsi mendapatkan semula nilai atau teksnya bergantung pada kes penggunaan tertentu. Hasilnya ialah tatasusunan yang mengandungi nilai yang dipilih.

Contoh Penggunaan

Pertimbangkan penanda HTML berikut:

<code class="html"><select multiple>
  <option>Option 1</option>
  <option value="Option 2">Option 2</option>
</select>

<button onclick="
  var select = document.querySelector('select');
  var values = getSelectValues(select);
  alert(values);
">
  Show Selected Values
</button></code>

Apabila butang diklik , fungsi getSelectValues ​​digunakan dan nilai yang dipilih dipaparkan dalam kotak makluman.

Pertimbangan Tambahan

Kaedah JavaScript yang digariskan di atas menawarkan cara yang boleh dipercayai untuk mendapatkan semula nilai yang dipilih daripada berbilang kotak pilihan. Walau bagaimanapun, perlu diingat bahawa dalam keadaan tertentu, anda mungkin menghadapi isu keserasian merentas penyemak imbas dengan nilai dan sifat teks. Untuk memastikan tingkah laku yang konsisten, pertimbangkan untuk menggunakan perpustakaan seperti jQuery jika keserasian penyemak imbas menjadi kebimbangan utama.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Nilai Terpilih Daripada Elemen Pelbagai Pilihan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery html Array if for select using Attribute function this alert

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Membetulkan Ralat \"\'No \'Access-Control-Allow-Origin\' header\" Apabila Memuatkan XML dengan jQuery AJAX?Artikel seterusnya：Bagaimana untuk Membetulkan Ralat \"\'No \'Access-Control-Allow-Origin\' header\" Apabila Memuatkan XML dengan jQuery AJAX?

Artikel berkaitan

Lihat lagi

• Analisis mendalam bagi komponen kumpulan senarai Bootstrap
• Penjelasan terperinci tentang fungsi JavaScript kari
• Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
• Angularjs menyepadukan UI WeChat (weui)
• Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved