Wie fülle ich ein Select-Element programmgesteuert mit Optionen in JavaScript?

Hinzufügen von Optionen zur Auswahl mit JavaScript

Erweitern wir die bereitgestellte Funktion und erkunden wir mehrere Methoden, um Optionen mit einem Bereich von Werten zu erstellen und hinzuzufügen sie einem ausgewählten Element mit der ID „mainSelect“ zu:

Methode 1:

Diese Methode führt eine verbesserte for-Schleife ein, die programmgesteuert Optionen innerhalb des gewünschten Bereichs erstellt:

<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>

Methode 2 (Refactoring):

Um die Lesbarkeit zu vereinfachen und zu verbessern, können Sie eine Funktion zur Abwicklung dieses Prozesses erstellen:

<code class="javascript">function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0;
        var max = max || min + 100;

        var select = document.getElementById(target);

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

Methode 3 (Verkettung):

Schließlich können Sie den HTMLSelectElement-Prototyp mit einer „populate“-Methode erweitern:

<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>

Das obige ist der detaillierte Inhalt vonWie fülle ich ein Select-Element programmgesteuert mit Optionen in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!