Hinzufügen von Optionen zur Auswahl mit JavaScript

Anika Tabassum Era 30 Januar 2023
  1. Erstellen Sie das option-Tag und hängen Sie es an die Auswahl in JavaScript an
  2. Verwenden Sie den Option-Konstruktor, um neue Optionen in JavaScript hinzuzufügen
  3. Verwenden Sie das DOM-Element jQuery, um neue Optionen in JavaScript hinzuzufügen
Hinzufügen von Optionen zur Auswahl mit JavaScript

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>
&nbsp;
<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:

Option anhängen, um in Javascript auszuwählen

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>
&nbsp;
<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:

Optionskonstruktor in Javascript

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>
&nbsp;
<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:

jquery-Option

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Verwandter Artikel - JavaScript Select