wie man dynamisch Optionen zu einer bestehenden Auswahl in Vanilla Javascript hinzufügt

Lesezeit: 3 Minuten

Benutzer-Avatar
avorum

Ich möchte eine Option dynamisch mit einfachem Javascript zu einer Auswahl hinzufügen. Alles, was ich finden konnte, beinhaltet JQuery oder versucht, die Auswahl auch dynamisch zu erstellen. Das nächste, was ich finden konnte, war das dynamische Hinzufügen der Eingabetypauswahl mit Optionen in Javascript, was letzteres tut und das einzige war, das ich gefunden habe, das JQuery nicht beinhaltet. Obwohl ich versucht habe, es so zu verwenden:

daySelect = document.getElementById('daySelect');
daySelect.innerHTML += "<option'>Hello world</option'>";
alert(daySelect.innerHTML)

Nachdem ich dies getan hatte, gab es keine Änderung an der Auswahl und die Warnung gab mir

HELLO WORLD</option'>

Ich entschuldige mich, wenn dies einfach ist, aber ich bin sehr neu in Javascript und Webprogrammierung im Allgemeinen. Vielen Dank für jede Hilfe.

EDIT: Also habe ich die gegebenen Vorschläge so ausprobiert.

daySelect = document.getElementById('daySelect');
myOption = document.createElement("option");
myOption.text = "Hello World";
myOption.value = "Hello World";
daySelect.appendChild(myOption);

Dies hat die Auswahl auf der Seite überhaupt nicht geändert. Irgendeine Idee warum? Und ich habe überprüft, ob der Code mit einer Warnung ausgeführt wurde.

BEARBEITEN: Die Idee hat funktioniert, es stellte sich nur heraus, dass kein Wert in der Dropdown-Liste angezeigt wurde. Ich weiß nicht warum, aber ich kann mir das vorstellen, denke ich.

  • Diese einfachen Anführungszeichen nach “option” werden nicht benötigt.

    – Zoltan. Tamasi

    18. Juli 2013 um 17:52 Uhr

  • sollte sein "<option>Hello world</option>"

    – mkorjak

    18. Juli 2013 um 17:53 Uhr

  • Ja, die einfachen Anführungszeichen sind nicht nur unnötig, sie sind ein Syntaxfehler in HTML.

    – Rory O’Kane

    18. Juli 2013 um 17:54 Uhr


Dieses Tutorial zeigt genau, was Sie tun müssen: Hinzufügen von Optionen zu einem HTML-Auswahlfeld mit Javascript

Grundsätzlich:

 daySelect = document.getElementById('daySelect');
 daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');

  • Dieser Vorschlag hat es geschafft, dass mein Text richtig angezeigt wird, während die anderen Vorschläge aus irgendeinem Grund dies nicht konnten.

    – avorum

    18. Juli 2013 um 19:14 Uhr

  • die beste Antwort nach dem Durchsuchen anderer Materialien

    – Rabb-bit

    8. April 2016 um 12:43 Uhr

  • Sie können auch verwenden daySelect.options.add( new Option('Key','Value') )

    – Jorge Garza

    15. Juni 2017 um 3:49 Uhr

  • Für mich musste ich zuerst die Länge der Optionen festlegen und dann die Optionen hinzufügen. Andernfalls würden die Optionen nicht hinzugefügt. deleteSelect.options.length = 2; deleteSelect.options[0] = new Option(messageResources.True, "true"); deleteSelect.options[0] = new Option(messageResources.False, "false");

    – EIN

    30. Januar 2019 um 18:27 Uhr


Ich denke, so etwas würde den Job machen.

var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("daySelect");
select.appendChild(option);

  • document.createElement(“day”) -> ‘day’ ist nicht der richtige Tag-Name, Sie möchten stattdessen ‘option’.

    – Lochemage

    18. Juli 2013 um 17:57 Uhr

  • Vielen Dank an alle für Ihre Antworten.

    – avorum

    18. Juli 2013 um 18:06 Uhr

Benutzer-Avatar
Benutzer

Der einfachste Weg ist:

selectElement.add(new Option('Text', 'value'));

Ja, so einfach. Und es funktioniert sogar in IE8. Und hat andere optionale Parameter.

Siehe Dokumente:

Benutzer-Avatar
Esteban Lezama

.add() funktioniert auch.

var daySelect = document.getElementById("myDaySelect");
var myOption = document.createElement("option");
myOption.text = "test";
myOption.value = "value";
daySelect.add(myOption);

W3-Schule – versuchen Sie es

Benutzer-Avatar
Benutzer28864

Versuche dies;

   var data = "";
   data = "<option value = Some value> Some Option </option>";         
   options = [];
   options.push(data);
   select = document.getElementById("drop_down_id");
   select.innerHTML = optionsHTML.join('\n'); 

Benutzer-Avatar
Tyler2P

<html>
    <head></head>
    <body>
        <select id="ddl"></select>
    </body>
    <script>
        var ddl = $("#ddl");
        ddl.empty();
        ddl.append($("<option></option>").val("").html("--Select--"));
    </script>
</html>

1015370cookie-checkwie man dynamisch Optionen zu einer bestehenden Auswahl in Vanilla Javascript hinzufügt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy