Hinzufügen von Optionen zur Auswahl mit JavaScript
-
Erstellen Sie das
option-Tag und hängen Sie es an die Auswahl in JavaScript an -
Verwenden Sie den
Option-Konstruktor, um neue Optionen in JavaScript hinzuzufügen -
Verwenden Sie das DOM-Element
jQuery, um neue Optionen in JavaScript hinzuzufügen
Grundsätzlich können Optionen eines select-Elements manuell angeordnet werden.
Aber viele Optionen und das Fehlen einer dynamischen Handhabung der Kategorien können im manuellen Fall zu Problemen führen. In dieser Hinsicht sind die JavaScript-Methoden, neue Optionen zu erstellen und sie bei Bedarf zu ändern, viel akzeptabler.
Wir zeigen drei Möglichkeiten, dem select-Element neue Optionen hinzuzufügen. Zuerst erstellen wir ein option-Element, das das DOM manipuliert und Text und Wert zum Speichern des Objekts hinzufügt.
Später werden wir das Objekt an die select-id anhängen. Eine andere Möglichkeit besteht darin, einen option-Konstruktor zu initiieren und den erforderlichen Text und Wert hinzuzufügen.
Wir zeigen die Arbeit an, indem wir sie an das ausgewählte Elementobjekt anhängen. Erstellen Sie zum Schluss ein jQuery-Dom-Element und hängen Sie es an select an.
Erstellen Sie das option-Tag und hängen Sie es an die Auswahl in JavaScript an
Wir deklarieren eine Instanz (x) für select und erstellen eine object option für die element option. Als nächstes weisen wir dem Objekt Text und Wert zu.
Sehen wir uns zum besseren Verständnis die Codezeilen an.
Code-Auszug:
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script>
function myF() {
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.value = "hand";
console.log(option.value);
option.text = "Hand";
x.add(option);
}
</script>
</body>
</html>
Ausgabe:
Der letzte Befehl des scripted-Tags hat also x.add(option), was impliziert, dass die neue Option mit der Auswahl verknüpft wird. Hier können Sie statt add auch append und appendChild verwenden, was problemlos funktioniert.
Verwenden Sie den Option-Konstruktor, um neue Optionen in JavaScript hinzuzufügen
Das folgende Beispiel benötigt nur einen Konstruktor Option, um einen neuen Slot für eine neue Option zu erstellen.
Der Konstruktor Option akzeptiert nur zwei Parameter. Zuerst nimmt es den Textwert und dann die Eingabe des Wertattributs.
Code-Auszug:
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script>
function myF() {
var x = document.getElementById("mySelect");
var option = new Option("Hand", "hand");
console.log(option.value);
x.appendChild(option);
}
</script>
</body>
</html>
Ausgabe:
Verwenden Sie das DOM-Element jQuery, um neue Optionen in JavaScript hinzuzufügen
Das DOM-Element jQuery löst das Tag option aus, und später werden .val und .text verwendet, um Text und Wert zu definieren. Dann hängen wir es an die select-id an.
Code-Auszug:
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
function myF() {
$('#mySelect').append($('<option>').val('head').text('Head'));
}
</script>
</body>
</html>
Ausgabe:
