Hinzufügen von Optionen zur Auswahl mit Javascript

Ich möchte, dass dieses Javascript Optionen von 12 bis 100 in einer Auswahl mit id = "mainSelect" erstellt, da ich nicht alle Options-Tags manuell erstellen möchte. Können Sie mir einige Hinweise geben? Vielen Dank

function selectOptionCreate() {

  var age = 88;
  line = "";
  for (var i = 0; i < 90; i++) {
    line += "<option>";
    line += age + i;
    line += "</option>";
  }

  return line;
}

Sie können dies mit einer einfachen forSchleife erreichen:

var min = 12,
    max = 100,
    select = document.getElementById('selectElementId');

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

JS Fiddle Demo .

JS Perf vergleicht sowohl meine als auch die Antwort von Sime Vidas , weil ich dachte, dass seine etwas verständlicher / intuitiver aussieht als meine und ich fragte mich, wie sich das in der Implementierung niederschlagen würde. Laut Chromium 14 / Ubuntu 11.04 ist meins etwas schneller, andere Browser / Plattformen dürften jedoch unterschiedliche Ergebnisse erzielen.

Bearbeitet als Antwort auf einen Kommentar von OP:

[Wie] wendet [ich] dies auf mehr als ein Element an?

function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0,
            max = max || min + 100;

        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);
        }
    }
}
// calling the function with all three values:
populateSelect('selectElementId',12,100);

// calling the function with only the 'id' ('min' and 'max' are set to defaults):
populateSelect('anotherSelect');

// calling the function with the 'id' and the 'min' (the 'max' is set to default):
populateSelect('moreSelects', 50);

JS Fiddle Demo .

Und schließlich (nach einiger Verzögerung ...) ein Ansatz, der den Prototyp des erweitert, HTMLSelectElementum die populate()Funktion als Methode an den DOM-Knoten zu ketten :

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));
    }
};

document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});

JS Fiddle Demo .

Verweise:

• node.appendChild().
• document.getElementById().
• element.innerHTML.

Bitte schön:

for ( i = 12; i <= 100; i += 1 ) {
    option = document.createElement( 'option' );
    option.value = option.text = i;
    select.add( option );
}

Live-Demo: http://jsfiddle.net/mwPb5/

Update: Da Sie diesen Code wiederverwenden möchten, ist hier die Funktion dafür:

function initDropdownList( id, min, max ) {
    var select, i, option;

    select = document.getElementById( id );
    for ( i = min; i <= max; i += 1 ) {
        option = document.createElement( 'option' );
        option.value = option.text = i;
        select.add( option );
    }
}

Verwendung:

initDropdownList( 'mainSelect', 12, 100 );

Live-Demo: http://jsfiddle.net/mwPb5/1/

Der prägnanteste und intuitivste Weg wäre:

var selectElement = document.getElementById('ageselect');

for (var age = 12; age <= 100; age++) {
  selectElement.add(new Option(age));
}

Your age: <select id="ageselect"><option value="">Please select</option></select>

Sie können auch den Namen und den Wert unterscheiden oder Elemente am Anfang der Liste mit zusätzlichen Parametern zu den verwendeten Funktionen
hinzufügen : HTMLSelect Element .add (Element [, vorher]);
neue Option (Text, Wert, defaultSelected, ausgewählt);

Ich empfehle nicht, DOM-Manipulationen innerhalb einer Schleife durchzuführen - dies kann in großen Datenmengen teuer werden. Stattdessen würde ich so etwas tun:

var elMainSelect = document.getElementById('mainSelect');

function selectOptionsCreate() {
  var frag = document.createDocumentFragment(),
    elOption;
  for (var i=12; i<101; ++i) {
    elOption = frag.appendChild(document.createElement('option'));
    elOption.text = i;
  }
  elMainSelect.appendChild(frag);
}

Sie können mehr über DocumentFragment auf MDN lesen , aber hier ist das Wesentliche:

Es wird als einfache Version von Document verwendet, um ein Segment einer Dokumentstruktur zu speichern, das wie ein Standarddokument aus Knoten besteht. Der Hauptunterschied besteht darin, dass Änderungen am Fragment keine Auswirkungen auf das Dokument haben, keinen Reflow verursachen oder Leistungseinbußen verursachen, die auftreten können, wenn Änderungen vorgenommen werden, da das Dokumentfragment nicht Teil der tatsächlichen DOM-Struktur ist.

Das einzige, was ich vermeiden würde, ist, DOM-Operationen in einer Schleife auszuführen, um wiederholtes erneutes Rendern der Seite zu vermeiden.

var firstSelect = document.getElementById('first select elements id'),
    secondSelect = document.getElementById('second select elements id'),
    optionsHTML = [],
    i = 12;

for (; i < 100; i += 1) {
  optionsHTML.push("<option value=\"Age" + i + "\">Age" + i + "</option>";
}

firstSelect.innerHTML = optionsHTML.join('\n');
secondSelect.innerHTML = optionsHTML.join('\n');

Bearbeiten: Die Funktion wurde entfernt, um zu zeigen, wie Sie das von Ihnen erstellte HTML einfach einem anderen Auswahlelement zuweisen können. So vermeiden Sie unnötige Schleifen, indem Sie den Funktionsaufruf wiederholen.

Siehe: Was ist der beste Weg, um einer Auswahl aus einem Array mit jQuery Optionen hinzuzufügen?

$('#mySelect')
      .append($('<option>', { value : key })
      .text(value)); 

Wenn Sie ein neues OptionObjekt erstellen , müssen zwei Parameter übergeben werden: Der erste ist der Text, der in der Liste angezeigt werden soll, und der zweite der Wert, der der Option zugewiesen werden soll.

var myNewOption = new Option("TheText", "TheValue");

Sie weisen dieses OptionObjekt dann einfach einem leeren Array-Element zu, zum Beispiel:

document.theForm.theSelectObject.options[0] = myNewOption;

Keine der oben genannten Lösungen hat bei mir funktioniert. Die Append-Methode hat beim Versuch keinen Fehler ausgegeben, aber mein Problem nicht gelöst. Am Ende habe ich mein Problem mit der Dateneigenschaft von select2 gelöst. Ich habe json verwendet und das Array erhalten und es dann in select2 element initialize angegeben. Für mehr Details können Sie meine Antwort unten im Beitrag sehen.

https://stackoverflow.com/a/41297283/4928277

Oft haben Sie eine Reihe verwandter Datensätze. Ich finde es einfach und ziemlich aussagekräftig, selectdiese zu füllen :

selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');

Dies ersetzt vorhandene Optionen.
Sie können selectEl.insertAdjacentHTML('afterbegin', str);sie stattdessen oben hinzufügen.
Und selectEl.insertAdjacentHTML('beforeend', str);um sie am Ende der Liste hinzuzufügen.

IE11-kompatible Syntax:

array.map(function (c) { return '<option value="'+c.id+'">'+c.name+'</option>'; }).join('');