Bagaimana untuk Mengisi Elemen Pilih Secara Dinamik dengan Pilihan dalam JavaScript?

Fungsi JavaScript untuk Mengisi Pilihan Pilihan Secara Dinamik

Masalah:

Fungsi JavaScript yang disediakan bertujuan untuk mencipta pilihan dari 12 hingga 100 dalam elemen dengan id "mainSelect." Walau bagaimanapun, fungsi semasa menjana pilihan secara manual, yang tidak cekap.

Penyelesaian:

Untuk menyelesaikan isu ini, kami boleh menggunakan gelung mudah:

<code class="js">const min = 12;
const max = 100;
const select = document.getElementById('mainSelect');

for (let i = min; i <= max; i++) {
  const option = document.createElement('option');
  option.value = i;
  option.textContent = i;
  select.appendChild(option);
}</code>

Pendekatan ini menyediakan cara yang lebih cekap dan automatik untuk mengisi pilihan.

Penyesuaian dan Kebolehgunaan Semula:

Untuk meningkatkan kebolehgunaan fungsi, kami boleh membenarkan penyesuaian nilai minimum dan maksimum. Berikut ialah versi yang dipertingkatkan yang menerima parameter tambahan:

<code class="js">function populateSelect(selectElementId, min, max) {
  const select = document.getElementById(selectElementId);
  if (!min) { min = 0; }
  if (!max) { max = min + 100; }

  for (let i = min; i <= max; i++) {
    const option = document.createElement('option');
    option.value = i;
    option.textContent = i;
    select.appendChild(option);
  }
}</code>

Fungsi yang disemak ini membolehkan anda menentukan julat pilihan yang diingini untuk mana-mana elemen pada halaman web anda.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Elemen Pilih Secara Dinamik dengan Pilihan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!