Bagaimana untuk Mengisi Pilihan Pilihan Secara Dinamik dalam JavaScript?

Mengisi Pilihan Pilihan Secara Dinamik

Kod JavaScript yang diberikan bertujuan untuk mencipta elemen pilih dengan pilihan antara 12 hingga 100. Walaupun kod itu menggunakan gelung for, ia adalah bukan pendekatan yang paling cekap untuk menjana sejumlah besar pilihan.

Diperbaiki Kod:

Untuk mencapai kefungsian yang diingini, pertimbangkan kod dioptimumkan berikut:

<code class="javascript">var min = 12;
var max = 100;
var select = document.getElementById("mainSelect");

for (var i = min; i <= max; i++) {
  var opt = document.createElement("option");
  opt.value = i;
  opt.innerHTML = i;
  select.appendChild(opt);
}</code>

Kod ini menjana dan menambahkan pilihan secara dinamik pada elemen pilih menggunakan gelung. Ia menghapuskan keperluan untuk mencipta pilihan secara manual, menjadikannya lebih cekap.

Peningkatan Tambahan:

1. Fungsi Generik:

Untuk memudahkan lagi proses, anda boleh mencipta fungsi boleh guna semula yang mengisi elemen terpilih:

<code class="javascript">function populateSelect(id, min, max) {
  var select = document.getElementById(id);
  for (var i = min; i <= max; i++) {
    var opt = document.createElement("option");
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
  }
}</code>

2. Sambungan Prototaip:

Sebagai alternatif, anda boleh melanjutkan prototaip HTMLSelectElement untuk menambah kaedah mengisi:

<code class="javascript">HTMLSelectElement.prototype.populate = function(opts) {
  var settings = {
    min: 0,
    max: settings.min + 100
  };

  for (var userOpt in opts) {
    if (opts.hasOwnProperty(userOpt)) {
      settings[userOpt] = opts[userOpt];
    }
  }

  for (var i = settings.min; i <= settings.max; i++) {
    this.appendChild(new Option(i, i));
  }
};</code>

Dengan kaedah ini, anda boleh mengisi elemen terpilih seperti:

<code class="javascript">document.getElementById("mainSelect").populate({
  min: 12,
  max: 40
});</code>

Pendekatan ini memberikan fleksibiliti dan kebolehgunaan semula dalam populasi pilihan secara dinamik pilihan.

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