Wir werden verstehen, wie man mit < umgeht wählen > Option in JavaScript in diesem Tutorial.
HTML-Auswahloption
Eine Option erleichtert uns die Optionsliste. Es erlaubt uns, eine oder mehrere Optionen zu wählen. Zur Bildung einer Option nutzen wir die Elemente und.
Zum Beispiel:
Red Yellow Green Blue
Die Option ermöglicht es uns, jeweils eine der oben genannten Optionen auszuwählen.
Wenn wir mehr als eine Auswahl wünschen, können wir das Attribut < hinzufügen mehrere > Elemente unten:
char und int Java
Red Yellow Green Blue
HTMLSelectElement-Typ
Wir verwenden den Typ HTMLSelectElement für die Interaktion mit Optionen in JavaScript.
Der Typ HTMLSelectElement enthält die folgenden hilfreichen Attribute:
selectedIndex-Eigenschaft
Wir wenden die DOM-API gerne an querySelector() oder getElementById() .
Das Beispiel zeigt, wie Sie den unten aufgeführten ausgewählten Optionsindex erhalten:
JavaScript Select Option Demo Select a Color Red Yellow Green Blue Get a Selected Index const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.selectedIndex); }; Wie es funktioniert:
- Wählen Sie zunächst die Komponenten und mithilfe der Methode querySelector() aus.
- Verknüpfen Sie anschließend den Click-Event-Listener mit dieser Schaltfläche und zeigen Sie den ausgewählten Index mit Hilfe der Methode „alert()“ an, wenn die Schaltfläche gedrückt wird.
Wert-Eigenschaft
Die Werteigenschaft des Elements hängt von der Komponente und dem Mehrfachattribut seines HTML ab:
- Die Werteigenschaft eines Auswahlfelds ist eine leere Zeichenfolge, wenn keine Option ausgewählt wurde.
- Die Werteigenschaft eines Auswahlfelds ist der Wert der gewählten Option, wenn eine Option ausgewählt wurde und das Wertattribut enthält.
- Die Werteigenschaft eines Auswahlfelds ist der Text der gewählten Option, wenn eine Option ausgewählt wurde und kein Wertattribut enthält.
- Die Werteigenschaft eines Auswahlfelds wird von der ursprünglich ausgewählten Option in Bezug auf die letzten beiden Regeln abgeleitet, wenn mehr als eine Option ausgewählt wird.
Betrachten Sie das folgende Beispiel:
JavaScript Selected Value Select a Color Red Yellow Green Blue Get a Selected Value const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.value); }; In diesem obigen Beispiel:
- Das Wertattribut des Elements ist leer, wenn wir die Anfangsoption auswählen.
- Das Wertattribut eines Auswahlfelds ist Ember.js, da die ausgewählte Option kein Wertattribut enthält, wenn wir die letzte Option auswählen.
- Das Wertattribut ist „1“ oder „2“, wenn wir die dritte oder zweite Option wählen.
HTMLOptionElement-Typ
Der Typ HTMLOptionElement veranschaulicht das Element in JavaScript.
Dieser Typ enthält die folgenden Eigenschaften:
Index- Der Index der Option innerhalb der Optionsgruppe.
Ausgewählt- Es gibt einen wahren Wert zurück, wenn die Option ausgewählt wird. Für die Auswahl einer Option setzen wir die selected-Eigenschaft auf true.
Text- Es gibt den Text der Option zurück.
Wert- Es gibt das Wertattribut von HTML zurück.
Die Komponente enthält ein Optionsattribut, das uns den Zugriff auf die Sammlungsoptionen ermöglicht:
selectBox.options
Um beispielsweise auf den Wert und Text der zweiten Option zuzugreifen, verwenden wir Folgendes:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
Um eine ausgewählte Option der Komponente zusammen mit einer individuellen Auswahl zu erhalten, verwenden wir den folgenden Code:
let selectOption = selectBox.options [selectBox.selectedIndex];
Danach können wir über die Wert- und Texteigenschaften auf den Wert und Text einer ausgewählten Option zugreifen:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Wenn die Komponente mehr als eine Auswahl zulässt, können wir ein ausgewähltes Attribut verwenden, um zu bestimmen, welche Option ausgewählt ist:
JavaScript Selected Box Select one or more Colors: Red Yellow Green Blue Get a Selected Colors const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (e) => { e.preventDefault(); const selectValues = [].filter.call(sb.options, option => option.selected).map (option => option.text); alert(selectedValues); }; Im Beispiel die sb.option ist das Array-ähnliche Objekt. Daher enthält es nicht die gleiche filter()-Methode wie das Array-Objekt.
Um diese Art von Methoden über ein Array-Objekt auszuleihen, verwenden wir eine call()-Methode, die unten das Array der ausgewählten Optionen angibt:
[].filter.call(sb.options, option => option.selected)
Und um das Textattribut einer beliebigen Option zu erhalten, können wir das Ergebnis einer filter()-Methode wie folgt mit einer map()-Methode verketten:
.map(option => option.text);
Um die ausgewählte Option mithilfe der for-Schleife abzurufen
Wir können die for-Schleife zum Durchlaufen der ausgewählten Listenoptionen verwenden, um zu bestimmen, welche ausgewählt wird. Es könnte eine Funktion beschrieben werden, die den Verweis auf eine ausgewählte Option oder den Wert zurückgibt. Nachfolgend finden Sie den Verweis auf eine ausgewählte Option:
function getSelectedOption(sel) { var opt; for (var i= 0, len= sel.options.length; i<len; i++) { opt="sel.options[i];" if (opt.selected="==" true) break; } return opt; var console.log(opt.value); console.log(opt.text); < pre> <p>This function gives a single chosen option, which is compatible for the select-one type of select list. The same function compatible for select-multiple type pf select lists could give more than one selected option.</p> <h2>Summary</h2> <ul> <li>The component permits us for selecting one or more options. We can include the multiple property to the component for enabling more than one selections.</li> <li>The HTMLOptionElement illustrates the component. The selected attribute is true if an option is chosen. The selected value and selected text attributes return the value Add the text of the chosen option.</li> <li>The HTMLSelectElement illustrates the component. We can use the value and selected index for getting the value and index of the chosen option.</li> </ul> <hr></len;>