Hinzufügen von Optionen zu einem <Auswählen>-Dropdown mit jQuery

Im heutigen Beitrag wird das Hinzufügen neuer alternativer Optionen zum Element <Select> in jQuery erörtert.

Hinzufügen von Optionen zu einem <Auswählen>-Dropdown mit jQuery

Dieser Ansatz wird im Allgemeinen verwendet, um Optionen zu den Formularfeldwerten <Select> hinzuzufügen. Es fügt das neue HTMLOptionElement zum vorherrschenden Auswahlelement hinzu, basierend auf den Kriterien, die der Unterscheidungsbedingung entsprechen.

Syntax:

new Option(text, value)

Der Konstruktor new Option() nimmt zwei Argumente entgegen:

1. text - Dies ist ein optional verfügbarer Parameter und eine Zeichenfolge, die den Inhalt des Details darstellt, dh den angezeigten Text. Wenn es nicht mehr eindeutig ist, wird ein Standardwert von "" leerer Zeichenfolge verwendet.
2. value – Dies ist ein optional verfügbarer Parameter und eine Zeichenfolge, die den Wert des HTMLOptionElement darstellt, d. h. das Wertattribut des Äquivalents <option>. Wenn nicht angegeben, wird der Textwert als Wert verwendet, z. B. für den Wert des zugehörigen <select>-Elements, wenn das Formular an den Server gesendet wird.

Lassen Sie es uns anhand des folgenden Beispiels verstehen.

Beispielcode (HTML):

<select id="city">
  <option value="mumbai">Mumbai</option>
  <option value="goa">Goa</option>
  <option value="delhi">Delhi</option>
</select>

Beispielcode (JavaScript):

const o = new Option('Banglore', 'banglore');
$('#city').append(o);

Wir haben ein Dropdown-Menü Stadt mit der Auswahl im obigen Beispiel beschrieben. Der Standardwert für das Dropdown-Menü Stadt ist Mumbai.

Um die neue Auswahl hinzuzufügen, erstellen Sie die Instanz des Objekts Option und fügen Sie text und Wert als Parameter hinzu. Sobald die Instanz erstellt ist, hängen wir die Instanz an das Element <select> an.

Versuchen Sie, das obige Code-Snippet in einem beliebigen Browser auszuführen, der jQuery unterstützt. Es wird das folgende Ergebnis angezeigt:

Ausgang:

Sie können über diesen Link auf die Live-Demo des obigen Beispielcodes zugreifen.