jQuery / Selector / :selected — Gewählte option-Elemente eines select auswählen
jQuery :selected findet aktuell gewählte option-Elemente in einem select. $("#fruit option:selected") liefert Elemente, $("#fruit").val() direkt den Wert. HTML-selected-Attribut und veränderte aktuelle Auswahl können sich unterscheiden.
Elemente, Werte und Texte
Die :selected-Referenz betrifft Optionen, keine Checkboxen oder Radios. Begrenzen Sie die Abfrage auf das gewünschte select oder Formular, damit andere Felder nicht hineinmischen.
.text() ist die Beschriftung, .val() der Wert. Bei mehreren option-Elementen liest .val() nur das erste; .text() verbindet alle Texte. Alle Mehrfachwerte liest man am select selbst. Für Angaben je Element verwenden Sie map oder Iteration.
Das Beispiel trennt eine Frucht und mehrere Themen sowie Text JavaScript und Schlüssel js. Deaktivierte Optionen und eine deaktivierte optgroup zeigen Auswahl gegenüber übermittelbaren Werten.
Vollständiges Beispiel
Speichern und öffnen Sie UTF-8 als selected-demo.html. Internet lädt vollständiges jQuery 4.0.0, ohne Server oder Build. Windows Edge mit 4.0.0 und 3.7.1 prüfte Anfang, Tastatur, deaktivierte Optionen, Leeren und Reset.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Read selected options and submitted values</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<style>
body { font: 16px/1.6 sans-serif; max-width: 740px; margin: 20px; }
label { display: block; margin-top: 12px; }
select, button { font: inherit; max-width: 100%; margin: 6px 0; }
#topics { display: block; min-width: 230px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<form id="chooser">
<label for="fruit">Fruit (single)</label>
<select id="fruit" name="fruit"><option value="apple">Apple</option><option value="banana">Banana</option></select>
<label for="topics">Topics (multiple)</label>
<select id="topics" name="topics" multiple size="6">
<option value="js" selected>JavaScript</option>
<option value="css">CSS</option>
<option value="html" selected disabled>HTML (disabled)</option>
<optgroup label="Unavailable group" disabled><option value="legacy" selected>Legacy</option></optgroup>
</select>
<button type="button" id="set">Set Banana and CSS</button>
<button type="button" id="clear">Clear topics</button>
<button type="button" id="restore">Reset</button>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
jQuery(function ($) {
const $fruit = $("#fruit"), $topics = $("#topics"), form = document.querySelector("#chooser");
let changes = 0;
function values($options) { return $options.map(function () { return this.value; }).get(); }
function render() {
const $selected = $topics.find("option").filter(":selected");
const data = new URLSearchParams(new FormData(form));
$("#result").text("single=" + $fruit.val() + "\nsingleText=" + $fruit.find("option:selected").text() +
"\nselectedOptions=" + JSON.stringify(values($selected)) + "\nvalues=" + JSON.stringify($topics.val()) +
"\nselectedAttribute=" + JSON.stringify(values($topics.find("option[selected]"))) +
"\nform=" + data.toString() + "\nchanges=" + changes);
}
$fruit.add($topics).on("change", function () { changes++; render(); });
$("#set").on("click", function () {
$fruit.val("banana").trigger("change"); $topics.val(["css"]).trigger("change");
});
$("#clear").on("click", function () { $topics.val([]).trigger("change"); });
$("#restore").on("click", function () { form.reset(); changes = 0; render(); });
render();
});
</script>
</body>
</html>Fruit hat kein selected-Attribut, wählt aber im Einzel-select zuerst Apple. Drei Themen sind ausgewählt, nur js ist übermittelbar.
single=apple
singleText=Apple
selectedOptions=["js","html","legacy"]
values=["js"]
selectedAttribute=["js","html","legacy"]
form=fruit=apple&topics=js
changes=0- Banana ändert single und singleText gemeinsam, auch per Tastatur-change.
- Set Banana and CSS ergibt selectedOptions und values ["css"], selectedAttribute bleibt ["js","html","legacy"].
- Clear topics ergibt zwei leere Arrays. Formulardaten enthalten nur fruit.
- Reset stellt auch die deaktivierten HTML- und Legacy-Auswahlen wieder her.
- Manuelle Mehrfachauswahl verwendet die System-/Browsertasten. Buttons schaffen geräteunabhängige Vergleichsbedingungen.
selectedOptions sind DOM-Auswahlwerte, values das select-.val(), selectedAttribute vorhandene Attribute. form ist FormData als URL-Abfrage, ohne Sendung. changes zählt Handler; Set löst für beide Felder je ein Ereignis aus, also zwei.
Aktueller Zustand und Vorgabe
option.selected und :selected meinen den aktuellen Zustand. [selected] prüft Attributexistenz; defaultSelected die Vorgabe. Benutzerwechsel schreiben diese nicht entsprechend um. Nutzen Sie [selected] nicht für aktuelle Auswahl.
.val(["css"]) setzt aktuelle Werte, .val([]) leert Mehrfachauswahl. Der .val()-Setter erzeugt change nicht selbst. Ohne Ereignis oder render kann die Berichtsanzeige trotz geändertem Feld alt bleiben.
Ab jQuery 3 liefert ein leeres Mehrfach-select []. .val() auf einer leeren Optionssammlung liefert undefined. Ein Einzel-select ohne Auswahl nach unbekanntem Wert liefert null. Das sind nicht durchweg leere Zeichenketten.
Reset ruft form.reset() und render auf. Änderungen der Vorgabeattribute würden auch das Rücksetzziel ändern. Hier bleiben Attribute bestehen und nur aktuelle Werte wechseln.
Deaktiviert, :checked und Anwendung
Deaktivierte Optionen, auch unter deaktivierter optgroup, bleiben möglicherweise ausgewählt, fehlen aber in select-.val() und FormData. Auswahlanzahl ist keine Übermittlungsanzahl; anfangs sind es drei gegenüber eins. Prüfen Sie auch fehlenden name oder deaktiviertes select.
:checked umfasst Optionen, Checkboxen und Radios. Auf option:checked begrenzt erhält man hier dieselben Optionen; globale Abfragen können Typen mischen.
:selected ist jQuery-Erweiterung und kein direktes Argument für natives document.querySelectorAll(). Erst CSS-Optionen wählen, dann .filter(":selected") verwenden. Nativ kommen select.selectedOptions oder begrenztes option:checked infrage.
Farben oder Filter einmal anfangs und bei Änderungen aktualisieren. Definieren Sie auch einen Weg für programmatische Setter. Texte mit .text() statt HTML-Verkettung ausgeben und Werte sowie fachliche Regeln auf dem Server erneut prüfen.
