Entfernen, Hinzufügen und Auswählen der Optionen eines Select-Tags mit jQuery
-
Fügen Sie Optionen des
<select>-Tags hinzu -
Optionen des
<select>-Tags entfernen - Entfernen, Hinzufügen und Auswählen der Option eines Auswahlfelds mit jQuery
Wir konzentrieren uns in diesem Artikel auf drei unterschiedliche Funktionen. Die erste umfasst das Hinzufügen der Option, die zweite das Entfernen der Option und die dritte umfasst das Ausführen beider Aktionen innerhalb desselben Codes.
Der heutige Artikel zielt darauf ab, alle vorhandenen Optionen eines ausgewählten Tags zu löschen, dann neue Optionen hinzuzufügen und auszuwählen. Alle diese Aktionen sollten mit Hilfe von jQuery durchgeführt werden. Wir werden in kleinen Schritten vorgehen.
Wir werden zuerst untersuchen, wie Optionen hinzugefügt werden, verschiedene Methoden zum Entfernen von Optionen entdecken und schließlich lernen, wie man Optionen in einem Code-Snippet löscht, hinzufügt und auswählt.
Fügen Sie Optionen des <select>-Tags hinzu
Normalerweise fügen wir die Optionen eines <select>-Tags ohne JavaScript hinzu, aber manchmal müssen wir die Optionen in den Dropdown-Menüs unserer Webseiten mit jQuery oder JS hinzufügen. Wir werden einige Methoden besprechen, die uns helfen, die Optionen hinzuzufügen.
Verwenden Sie JavaScript, um Optionen hinzuzufügen
Wir beginnen damit, über das Hinzufügen der Optionen mit JavaScript zu sprechen. Dank der Benutzerfreundlichkeit von JavaScript haben wir viel Flexibilität, um mit den Elementen unserer Webseiten zu spielen.
Überprüfen Sie die Anforderungen für das Hinzufügen der <option> im Code unten.
<html>
<head>
<script>
window.onload = function(){
var length = document.getElementById("drop_down").options.length;
drop_down.options[length] = new Option ("Text4");
}
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Ausgang:
Die Längenvariable wird auf 3 gesetzt, da das <select>-Tag drei Optionen enthält. Der Index kann verwendet werden, um beliebige Tags zu finden.
Wenn wir über die Optionen im <select>-Tag sprechen, befindet sich die erste Option auf Index 0. Die zweite auf Index 1 und so weiter.
Wir können eine neue Option hinzufügen, indem wir die gesamte Länge des Optionsarrays bestimmen und dann eine neue Option am Index neben der letzten erstellen, wie im Code gezeigt.
Verwenden Sie die .append()-Methode, um Optionen hinzuzufügen
Die folgende Technik, die wir verwenden können, um die Optionen zum bestehenden <select>-Tag hinzuzufügen, ist die .append()-Methode von jQuery. Die Methode append() fügt den Inhalt am Ende der ausgewählten Elemente hinzu.
Wir können sowohl den Text als auch HTML-Elemente im Parameter übergeben. Überprüfen Sie den Code und seine Ausgabe unten, um die Funktionsweise der Methode .append() zu verstehen.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#drop_down").append('<option>Text4</option>')
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Ausgang:
Die Funktion append() fügt die Option am Ende hinzu, wie in der Ausgabe zu sehen ist. Sie können die Funktion .prepend() verwenden, um die Option am Anfang hinzuzufügen.
Sie können den Positionen auch andere Optionen als Start oder Ende hinzufügen. Um die Option nach einer bestimmten Option einzufügen, können Sie die Methode after() verwenden, und um die Option vor der ausgewählten Option hinzuzufügen, können Sie die Methode .before() verwenden.
Optionen des <select>-Tags entfernen
Wir können die Optionen einer Dropdown-Liste mit JavaScript und jQuery entfernen. Lassen Sie uns verschiedene Ansätze besprechen, die uns helfen, die Optionen eines <select>-Tags zu entfernen.
Verwenden Sie die Methoden .find() und .remove(), um Optionen des Tags <select> zu entfernen
Die erste Methode, die wir zum Entfernen der Optionen eines Select-Tags besprechen werden, ist die Verwendung der jQuery-Methoden .find() und .remove().
.find(): Diese Methode ruft die untergeordneten Elemente des Elements ab. Kinder, Enkel, Urenkel usw. gelten alle als Nachkommen. Im Gegensatz zu den anderen Baumtraversierungstechniken erfordert die find()-Funktion den Filterparameter.
.remove(): Das ausgewählte Element und seine untergeordneten Elemente werden mit dieser jQuery-Methode entfernt.
Sehen wir uns die Funktionsweise dieser beiden Funktionen im folgenden Code an.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').find('option').remove();
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Ausgang:
Wie bereits erwähnt, erfordert die Methode find() den Filterparameter, also haben wir die option als Filter angegeben, wodurch alle Options-Tags aus dem select-Element abgerufen werden. Dann haben wir die Methode remove aufgerufen, die alle erhaltenen Options-Tags entfernt hat, wie in der Ausgabe zu sehen ist.
Sie können auch nur eine bestimmte Option aus einem ausgewählten Tag entfernen, ohne sie alle zu entfernen. Es kann eliminiert werden, indem einfach der Index der Option angegeben wird.
Wenn wir beispielsweise die zweite Option entfernen möchten, wissen wir, dass sie an Index 1 sein wird. Wir können einfach $('#drop down').find('option')[1].remove() eingeben Lösche es.
Verwenden Sie die Methoden .children() und .remove(), um Optionen des Tags <select> zu entfernen
Eine andere Methode, mit der wir alle Optionen eines <select>-Tags entfernen können, ist die Verwendung der Methoden .children() und .remove(). Die Methode .remove() entfernt alle ausgewählten Elemente, und die Methode .children() gibt alle direkten Kinder des ausgewählten Elements zurück.
Beachten Sie den folgenden Code, um die Funktionsweise dieser Methoden zu verstehen.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').children().remove();
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Ausgang:
Verwenden Sie die .empty()-Methode, um Optionen des <select>-Tags zu entfernen
Wenn Sie nicht mehrere Methoden verwenden möchten, um die Optionen zu entfernen, machen Sie sich keine Sorgen; jQuery hat Sie abgedeckt. jQuery hat eine .empty()-Methode, die alle untergeordneten Elemente des ausgewählten Elements entfernt. Diese Methode entfernt nicht das Element selbst.
Untersuchen Sie zum besseren Verständnis den Code und seine Ergebnisse.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').empty();
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Ausgang:
Das Dropdown-Menü ist immer noch da, aber ohne Optionen, wie in der Ausgabe zu sehen ist.
Verwenden Sie die .options-Methode, um Optionen des <select>-Tags zu entfernen
Eine weitere hilfreiche Methode zum Entfernen der Option ist die Verwendung der .options-Funktion von JavaScript. Dies ist die herkömmliche Methode zum Löschen aller Optionen.
Die Methode .options gibt alle Optionen einer Dropdown-Liste zurück. Was wir tun müssen, ist, options.length gleich Null zu setzen.
Die Methode Länge gibt uns die Anzahl der Elemente an, die in einem bestimmten Element enthalten sind. Wenn wir es auf Null setzen, zeigt es an, dass es kein Element innerhalb des ausgewählten Elements gibt. Erstaunlich, oder?
Schauen Sie sich den Code zum besseren Verständnis an.
<html>
<head>
<script>
window.onload = function(){
document.getElementById("drop_down").options.length=0;
}
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Ausgang:
Entfernen, Hinzufügen und Auswählen der Option eines Auswahlfelds mit jQuery
Bisher haben wir die Methoden und Strategien zur Verwendung von jQuery zum Hinzufügen und Entfernen von Optionen zu einem ausgewählten Tag behandelt. Wenn wir uns dem Hauptziel des Artikels nähern, werden wir die Operationen des Hinzufügens, Entfernens und Auswählens in einem einzigen Code kombinieren.
Es gibt zahlreiche Möglichkeiten, diese Funktionalität zu erreichen. Um Ihnen das Verständnis zu erleichtern, gehen wir jede Technik eingehend durch. Lass uns anfangen.
Verwenden Sie die Methoden .remove() und .append(), um die Option zu entfernen, hinzuzufügen und auszuwählen
Wir glauben, dass Sie jetzt mit den jQuery-Methoden .remove() und .append() vertraut sind. Wir verwenden .remove(), um alle Options-Tags des ausgewählten Elements zu entfernen, und dann .append(), um eine neue Option hinzuzufügen.
Überprüfen Sie den folgenden Code, um ihn zu verstehen.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down')
.find('option')
.remove()
.end()
.append('<option value="4">Text4</option>')
.val('4');
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option value="1">Text1</option>
<option value="2">Text2</option>
<option value="3">Text3</option>
</select>
</body>
</html>
Ausgang:
Sie könnten verwirrt sein, warum es eine .end()-Methode gibt und was sie tut. Die letzte Filteraktion in der aktuellen Kette wird mit der Methode .end() in jQuery beendet.
Wenn jQuery zum Verketten verwendet wird, ist die Methode .end() hilfreich.
Zuletzt haben wir die Methode .val() angewendet, um den Wert des ausgewählten Elements festzulegen. Wir haben dies verwendet, weil wir die von uns hinzugefügte Option auswählen wollten.
Verwenden Sie die Methoden .empty() und .append(), um die Option zu entfernen, hinzuzufügen und auszuwählen
Ein weiterer Ansatz, den wir zum Entfernen aller Optionen einer Dropdown-Liste besprochen haben, ist die Methode .empty(), die alle Optionen entfernt, und dann verwenden wir .append(), um eine neue Option hinzuzufügen. Überprüfen Sie den folgenden Code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').empty().append('<option selected="selected">Text4</option>');
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Ausgang:
Verwenden Sie JavaScript, um die Option zu entfernen, hinzuzufügen und auszuwählen
Für unsere notwendige Funktionalität kann JavaScript verwendet werden. In den obigen Abschnitten sind wir ausführlich auf das Hinzufügen und Entfernen von Optionen mit JavaScript eingegangen.
Sehen Sie sich zum besseren Verständnis den folgenden Code an.
<html>
<Kopf>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<Skript>
$(Dokument).ready(Funktion(){
var mySelect = document.getElementById('drop_down');
mySelect.options.length = 0;
mySelect.options[0] = neue Option ("Text4");
mySelect.options[0].s selected="true";
});
</script>
</head>
<Körper>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Ausgang:
Ersetzen Sie den Inhalt mit der Methode .html()
Indem wir den gesamten Inhalt des <select>-Tags durch die neue erforderliche Option ersetzen, können wir alle Optionen aus einem <select>-Tag entfernen, eine neue Option hinzufügen und sie mit jQuery auswählen. Dazu verwenden wir die Methode .html().
Die Methode .html() setzt entweder den Inhalt des angegebenen Elements oder gibt ihn zurück. Wenn diese Funktion zum Abrufen von Inhalten verwendet wird, gibt sie den Inhalt des ersten übereinstimmenden Elements zurück, und wenn sie zum Festlegen von Inhalten verwendet wird, überschreibt diese Technik den Inhalt aller übereinstimmenden Elemente.
Sehen wir uns die Funktionsweise dieser Methode an.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#drop_down").html("<option selected=\"selected\">Text4</option>")
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Ausgang:
Der Inhalt ersetzt vollständig den vorhandenen Inhalt des <select>-Tags, den wir in der .html()-Methode angegeben haben, wie in der Ausgabe zu sehen ist.
Ersetzen Sie den Inhalt mit der Methode .replaceWith()
Die jQuery-Methode .replaceWith() ermöglicht es uns, das ausgewählte Element durch den angegebenen Inhalt zu ersetzen. Überprüfen Sie den Code, um die Methode zum Ersetzen des Inhalts herauszufinden.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').replaceWith('<select id="drop_down"> <option selected="selected">Text4</option> </select>');
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Ausgang: