webentwicklung-frage-antwort-db.com.de

Hinzufügen von Optionen zur Auswahl mit Javascript

Ich möchte, dass dieses Javascript Optionen von 12 bis 100 in einem select mit id = "mainSelect" erstellt, da ich nicht alle Options-Tags manuell erstellen möchte. Kannst du mir ein paar 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;
}
129
jacktheripper

Sie können dies mit einer einfachen for-Schleife 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 Vergleich von sowohl meiner als auch Sime Vidas 'Antwort , lief, weil ich dachte, dass er ein bisschen verständlicher/intuitiver aussah als meine und ich fragte mich, wie sich dies in der Implementierung niederschlagen würde. Laut Chromium 14/Ubuntu 11.04 ist meine Mine etwas schneller, andere Browser/Plattformen haben jedoch wahrscheinlich andere Ergebnisse.


Editierte als Antwort auf den Kommentar von OP:

[Wie] wende [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 der HTMLSelectElement erweitert, um die Funktion populate() 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:

198
David Thomas

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, haben Sie 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 );
    }
}

Verwendungszweck:

initDropdownList( 'mainSelect', 12, 100 );

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

18
Šime Vidas

Ich empfehle nicht, DOM-Manipulationen innerhalb einer Schleife auszuführen - dies kann bei großen Datensätzen 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 der Kern davon:

Es wird als leichtere Version von Document verwendet, um ein Segment von .__ zu speichern. eine Dokumentstruktur, die wie ein Standarddokument aus Knoten besteht . Der Hauptunterschied besteht darin, dass das Dokumentfragment nicht Teil von .__ ist. Die tatsächliche DOM-Struktur. Änderungen, die am Fragment vorgenommen wurden, wirken sich nicht auf .__ aus. das Dokument zu einem Reflow führen oder Auswirkungen auf die Leistung haben, die auftreten, wenn Änderungen vorgenommen werden.

7
thdoan

Siehe: Wie kann ich mit jQuery Optionen aus einem Array auswählen?

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

Die eine Sache, die ich vermeiden würde, ist, DOM-Vorgänge in einer Schleife auszuführen, um wiederholte Wiedergaben 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 die von Ihnen erstellte HTML-Datei einfach einem anderen select-Element zuweisen können. So vermeiden Sie unnötige Schleifen, indem Sie den Funktionsaufruf wiederholen.

3
kinakuta

Wenn Sie ein neues Option-Objekt erstellen, müssen Sie zwei Parameter übergeben: Der erste ist der gewünschte Text in der Liste und der zweite der Option, der der Option zugewiesen werden soll.

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

Sie ordnen dieses Option-Objekt dann einfach einem leeren Array-Element zu, zum Beispiel:

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

Oft haben Sie eine Reihe verwandter Datensätze. Ich finde es einfach und ziemlich deklarativ, select folgendermaßen zu füllen:

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

Dadurch werden vorhandene Optionen ersetzt.
Sie können stattdessen selectEl.insertAdjacentHTML('afterbegin', str); verwenden, um sie oben hinzuzufü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('');
0
user

Der übersichtlichste 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 (item [ before]);
neue Option (text, value, defaultSelected, selected);

0
user

Keine der oben genannten Lösungen funktionierte für mich. Die Append-Methode hat beim Versuch keinen Fehler ausgegeben, aber mein Problem wurde 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 dann in select2 Element initialisieren. Für mehr Details sehen Sie meine Antwort unter Post.

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

0
Engin Aydoğdu