Wie füge ich eine Dropdown-Liste (<Auswahl>) programmgesteuert hinzu?

73

Ich möchte eine Funktion erstellen, um programmgesteuert einige Elemente auf einer Seite hinzuzufügen.

Nehmen wir an, ich möchte eine Dropdown-Liste mit vier Optionen hinzufügen:

<select name="drop1" id="Select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Wie kann ich das machen?

javascript  html  drop-down-menu  html-select 
— Christos Baziotis
quelle
2
Schauen Sie in document.createElementundelement.appendChild
— Ian
@koukouloforos ist meine Antwort hilfreich?
— WooCaSh
2
@WooCaSh es macht was ich verlange, aber ich bevorzuge wenn etwas in einfachem Javascript.
— Christos Baziotis
@ koukouloforos Grund? Wenn es sich um ein kommerzielles Projekt handelt, wird dringend empfohlen, eine Bibliothek zu verwenden.
— John Dvorak
@ JanDvorak Nein, ich mache nur ein paar Tests.
— Christos Baziotis

Antworten:

190

Dies funktioniert (reines JS, an ein div von id angehängt myDiv):

Demo: http://jsfiddle.net/4pwvg/

var myParent = document.body;

//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];

//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
myParent.appendChild(selectList);

//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i];
    option.text = array[i];
    selectList.appendChild(option);
}
Erweitern Sie das Snippet

— tymeJV
quelle
18
Es ist ein Wunder! Eine Nicht-jQuery-Lösung. Möglicherweise möchten Sie nur Eigenschaften anstelle von Attributen mit festlegen setAttribute(). Und nicht, dass es wichtig wäre, aber die Verwendung new Option(text, value)ist eine nette Abkürzung zum Erstellen von <option>Elementen
— Ian
3
@ Ian - Danke für die Tipps, immer noch reines JS zu lernen, leider zuerst jQuery gelernt, der Versuch, alles auch in reinem JS zu können, ist ein bisschen schwierig :)
— tymeJV
@tymeJV Natürlich versuche ich nur, deine Antwort zu verbessern (obwohl es großartig ist). Sehr wahr, obwohl es sich manchmal lohnender anfühlt, wenn Sie es ohne jQuery tun können :) Für jedermanns Referenz - stackoverflow.com/questions/6936071/… . Und ich habe keine Notwendigkeit für die Verwendung von setAttribute()/ gefunden, es getAttribute()sei denn, Sie arbeiten mit benutzerdefinierten Attributen (einschließlich data-*) Attributen. Ich weiß, dass es auch bei der Verwendung dieser Methoden Inkonsistenzen gibt, also bleibe ich weg
— Ian
4
Sie können auch Optionen hinzufügen, indem Sie selectList.add(option)( spec (etwas nach oben scrollen), mdn )
— Zirak
Vor langer Zeit funktionierte add () / remove () in verschiedenen Browsern unterschiedlich, daher riet ppk, sie nicht zu verwenden. Ich weiß nicht, wie der aktuelle Stand der Dinge ist.
— 7stud
12 
var sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';

var cars = [
  "volvo",
  "saab",
  "mercedes",
  "audi"
];

var options_str = "";

cars.forEach( function(car) {
  options_str += '<option value="' + car + '">' + car + '</option>';
});

sel.innerHTML = options_str;


window.onload = function() {
  document.body.appendChild(sel);
};
— 7stud
quelle
Dies ist die schnellste Lösung und funktioniert mit großen Datenmengen.
— Roman Newaza
2
@RomanNewaza, Überprüfen Sie die Geschwindigkeit, indem die forEach-Schleife durch eine normale alte for-Schleife ersetzt wird.
— 7stud
1
Nur als Warnung, wenn die Auswahl mit vom Benutzer erstellten Inhalten generiert wird, ist dies keine sichere Möglichkeit, eine Auswahl zu implementieren
— r0m4n
4

Ich habe schnell eine Funktion erstellt, die dies erreichen kann. Es ist möglicherweise nicht der beste Weg, dies zu tun, aber es funktioniert einfach und sollte browserübergreifend sein. Bitte wissen Sie auch, dass ich KEIN Experte für JavaScript bin, daher sind alle Tipps großartig :)

Reine Javascript-Lösung zum Erstellen von Elementen

function createElement(){
    var element  = document.createElement(arguments[0]),
        text     = arguments[1],
        attr     = arguments[2],
        append   = arguments[3],
        appendTo = arguments[4];

    for(var key = 0; key < Object.keys(attr).length ; key++){
        var name = Object.keys(attr)[key],
             value = attr[name],
             tempAttr = document.createAttribute(name);
             tempAttr.value = value;
        element.setAttributeNode(tempAttr)
    }
    
    if(append){
        for(var _key = 0; _key < append.length; _key++) {
            element.appendChild(append[_key]);
        }
    }

    if(text) element.appendChild(document.createTextNode(text));

    if(appendTo){
        var target = appendTo === 'body' ? document.body : document.getElementById(appendTo);
        target.appendChild(element)
    }       

    return element;
}

Mal sehen, wie wir das machen

<select name="drop1" id="Select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

So funktioniert das

    var options = [
        createElement('option', 'Volvo', {value: 'volvo'}),
        createElement('option', 'Saab', {value: 'saab'}),
        createElement('option', 'Mercedes', {value: 'mercedes'}),
        createElement('option', 'Audi', {value: 'audi'})
    ];


    createElement('select', null, // 'select' = name of element to create, null = no text to insert
        {id: 'Select1', name: 'drop1'}, // Attributes to attach
        [options[0], options[1], options[2], options[3]], // append all 4 elements
        'body' // append final element to body - this also takes a element by id without the #
    );

Das sind die Parameter

createElement('tagName', 'Text to Insert', {any: 'attribute', here: 'like', id: 'mainContainer'}, [elements, to, append, to, this, element], 'body || container = where to append this element');

Diese Funktion ist geeignet, wenn Sie viele Elemente anhängen müssen. Wenn es eine Möglichkeit gibt, diese Antwort zu verbessern, lassen Sie es mich bitte wissen.

bearbeiten:

Hier ist eine funktionierende Demo

JSFiddle Demo

Dies kann sehr individuell an Ihr Projekt angepasst werden!

— iConnor
quelle
3

Dieser Code würde dynamisch eine Auswahlliste erstellen. Zuerst erstelle ich ein Array mit den Autonamen. Zweitens erstelle ich ein Auswahlelement dynamisch und ordne es einer Variablen "sEle" zu und hänge es an den Hauptteil des HTML-Dokuments an. Dann benutze ich eine for-Schleife, um das Array zu durchlaufen. Drittens erstelle ich das Optionselement dynamisch und ordne es einer Variablen "oEle" zu. Mit einer if-Anweisung ordne ich dem ersten Optionselement [0] die Attribute 'disabled' und 'selected' zu, damit es immer ausgewählt wird und deaktiviert ist. Ich erstelle dann ein Textknoten-Array "oTxt", um die Array-Namen anzuhängen, und füge dann den Textknoten an das Optionselement an, das später an das Auswahlelement angehängt wird.

var array = ['Select Car', 'Volvo', 'Saab', 'Mervedes', 'Audi'];

var sEle = document.createElement('select');
document.getElementsByTagName('body')[0].appendChild(sEle);

for (var i = 0; i < array.length; ++i) {
  var oEle = document.createElement('option');

  if (i == 0) {
    oEle.setAttribute('disabled', 'disabled');
    oEle.setAttribute('selected', 'selected');
  } // end of if loop

  var oTxt = document.createTextNode(array[i]);
  oEle.appendChild(oTxt);

  document.getElementsByTagName('select')[0].appendChild(oEle);
} // end of for loop
Erweitern Sie das Snippet

— user3385463
quelle
2

Hier ist eine ES6-Version der Antwort von 7stud .

const sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';

const cars = [
  "Volvo",
  "Saab",
  "Mercedes",
  "Audi",
];

const options = cars.map(car => {
  const value = car.toLowerCase();
  return `<option value="${value}">${car}</option>`;
});

sel.innerHTML = options;

window.onload = () => document.body.appendChild(sel);
— Kevin Østerkilde
quelle
Das ist wirklich seltsam, Sie setzen innerHTML auf ein Array. Sind Sie sicher, dass dies nicht benötigtsel.innerHTML = options.join('')
— chx
Ja, ich bin sicher. Hier ist ein Beispiel für den Code in Aktion
— Kevin Østerkilde
1 
const countryResolver = (data = [{}]) => {
    const countrySelecter = document.createElement('select');
    countrySelecter.className = `custom-select`;
    countrySelecter.id = `countrySelect`;
    countrySelecter.setAttribute("aria-label", "Example select with button addon");

    let opt = document.createElement("option");
    opt.text = "Select language";
    opt.disabled = true;
    countrySelecter.add(opt, null);
    let i = 0;
    for (let item of data) {
        let opt = document.createElement("option");
        opt.value = item.Id;
        opt.text = `${i++}. ${item.Id} - ${item.Value}(${item.Comment})`;
        countrySelecter.add(opt, null);
    }
    return countrySelecter;
};
— Aliaksandr Shpak
quelle
1

Hier ist eine ES6-Version. Die Konvertierung in Vanilla JS sollte nicht zu schwierig sein, aber ich habe sowieso bereits jQuery:

function select(options, selected) {
  return Object.entries(options).reduce((r, [k, v]) => r.append($('<option>').val(k).text(v)), $('<select>')).val(selected);
}
$('body').append(select({'option1': 'label 1', 'option2': 'label 2'}, 'option2'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Erweitern Sie das Snippet

— chx
quelle
Verwenden reduceist ein bisschen übertrieben hier innit? A mapfunktioniert genauso gut für den Anwendungsfall, den OP beschreibt.
— Kevin Østerkilde
0 

const cars = ['Volvo', 'Saab', 'Mervedes', 'Audi'];

let domSelect = document.createElement('select');
domSelect.multiple = true;
document.getElementsByTagName('body')[0].appendChild(domSelect);


for (const i in cars) {
  let optionSelect = document.createElement('option');

  let optText = document.createTextNode(cars[i]);
  optionSelect.appendChild(optText);

  document.getElementsByTagName('select')[0].appendChild(optionSelect);
}
Erweitern Sie das Snippet

— Jesus Cuesta
quelle
0

Es ist sehr einfach, aber knifflig, aber hier ist, was Sie wollten. Ich hoffe, es ist hilfreich: Diese Funktion generiert eine Auswahlliste von 1990 bis 2018. Ich denke, dieses Beispiel kann Ihnen helfen, wenn Sie einen anderen Wert hinzufügen möchten, ändern Sie einfach den Wert von x und y. )

function dropDown(){
    var start = 1990;
    var today = 2019;
    document.write("<select>");
    for (var i = start ; i <= today; i++)
    document.write("<option>" + i + "</option>");
}
document.write("</select>");

dropDown();
— Kanaan
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.