Bagaimana untuk Menjana Pilihan Secara Dinamik untuk Elemen Pilih dalam JavaScript?

Penjanaan Pilihan Dinamik untuk Elemen Terpilih dengan JavaScript

Dalam pembangunan web, kami sering menghadapi keperluan untuk mencipta pilihan dinamik untuk elemen terpilih. Ini boleh menjadi tugas yang memakan masa jika dilakukan secara manual, terutamanya apabila berurusan dengan sejumlah besar pilihan. Artikel ini menyediakan penyelesaian untuk mengautomasikan proses ini menggunakan JavaScript.

Mencipta Pilihan dengan Gelung Untuk

Satu pendekatan mudah ialah menggunakan gelung for untuk lelaran melalui julat nilai dan cipta elemen pilihan secara dinamik. Sebagai contoh, untuk menjana pilihan daripada 12 hingga 100 dalam elemen pilih dengan ID "mainSelect", kod berikut boleh digunakan:

<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 memulakan nilai minimum dan maksimum dan mendapatkan semula elemen pilihan . Ia kemudian memasuki gelung untuk mencipta elemen pilihan, menetapkan nilai dan innerHTML mereka dan menambahkannya pada elemen pilih.

Melanjutkan HTMLSelectElement

Pendekatan alternatif ialah dengan lanjutkan prototaip HTMLSelectElement, membolehkan anda menambah kaedah "populate()" secara langsung untuk memilih elemen. Ini membolehkan anda merantai fungsi populasi kepada nod DOM, memberikan sintaks yang lebih ringkas.

<code class="javascript">HTMLSelectElement.prototype.populate = function (opts) {
    var settings = {};

    settings.min = 0;
    settings.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 sambungan ini, anda boleh mengisi elemen terpilih seperti ini:

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

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