Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mendapatkan Nilai Terpilih daripada Kotak Pelbagai Pilihan dalam JavaScript?

Bagaimana untuk Mendapatkan Nilai Terpilih daripada Kotak Pelbagai Pilihan dalam JavaScript?

Barbara Streisand
Barbara Streisandasal
2024-11-04 17:00:02407semak imbas

How to Get Selected Values from a Multiple Select Box in JavaScript?

Dapatkan Nilai daripada Kotak Berbilang Pilihan Menggunakan JavaScript

Dalam senario di mana anda menghadapi berbilang kotak pilihan, mengakses nilai yang dipilih adalah penting. Soalan ini menyelidiki pendekatan yang berkesan untuk mendapatkan semula nilai ini menggunakan JavaScript.

Sebagai permulaan, coretan kod yang anda berikan akan berulang melalui pilihan kotak pilihan berbilang, menyemak sama ada setiap pilihan dipilih. Jika benar, nilai pilihan akan ditambahkan pada tatasusunan.

Penyelesaian alternatif dibentangkan di bawah, menawarkan cara yang ringkas dan cekap untuk mendapatkan nilai yang dipilih:

<code class="js">function getSelectValues(select) {
  // Create an empty array to store the values.
  const result = [];

  // Obtain the options from the select element.
  const options = select && select.options;

  // Loop through the options to check which ones are selected.
  for (let i = 0; i < options.length; i++) {
    const option = options[i];

    // If the option is selected, we push its value into the result array.
    if (option.selected) {
      result.push(option.value || option.text);
    }
  }

  // Return the populated result array with the selected values.
  return result;
}

Fungsi ini mengambil kira elemen pilih sebagai hujah dan mengembalikan tatasusunan nilai yang dipilih. Berikut ialah contoh pantas yang menunjukkan penggunaannya:

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

<button onclick="
  const selectElement = document.getElementsByTagName('select')[0];
  const selectedValues = getSelectValues(selectElement);
  console.log(selectedValues);
">Show Selected Values</button></code>

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

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