Come recuperare il valore selezionato dal discesa JavaScript
In JavaScript, spesso ci imbattiamo in pagine Web intuitive che includono un questionario o un modulo per ottenere il valore di opzioni selezionate singoli o multipli. Inoltre, durante la gestione di una pagina Web basata su quiz, vogliamo avvisare l'utente in merito allo stato rispetto alla risposta fornita con un valore (corretto, sbagliato). In tali casi, il recupero dei valori selezionati dal discesa è molto utile per fornire chiarezza e risparmiare tempo alla fine dell'utente.
Questo articolo ti guiderà a recuperare i valori selezionati da un elenco a discesa in JavaScript.
Come ottenere/recuperare il valore selezionato dal discesa in JavaScript?
Per recuperare il valore selezionato dal menu a discesa in JavaScript, è possibile utilizzare:
-
- "valore" proprietà.
- "SelectedIndex" proprietà.
Ora passeremo attraverso ciascuno degli approcci menzionati uno per uno!
Metodo 1: ottenere/recuperare il valore selezionato dal menu a discesa in JavaScript utilizzando la proprietà Value
IL "valore"La proprietà restituisce l'attributo del valore di un campo di testo. Utilizzeremo questo metodo per ottenere l'opzione selezionata da un elenco a discesa e visualizzare il suo valore:
Sintassi
selezione.valore
Qui, il "valore"La proprietà restituirà il valore particolare selezionato dall'elenco a discesa.
Passiamo attraverso il seguente esempio per una migliore comprensione del concetto:
Esempio
In questo esempio, specificheremo l'ID denominato "Selezionare"E inserire i valori delle opzioni da selezionare nell'elenco a discesa. Questi valori di opzione verranno posizionati all'interno del ""Tag.
Ora includeremo un pulsante con un "al clic"Evento. Questo funzionerà in modo tale che quando il pulsante con valore "Verifica l'opzione"Essere premuto, la funzione"SelectValue ()"Verrà attivato:
Seleziona il genere dall'elenco a discesa fornito:
Il valore del genere selezionato è:
class = "output">
Successivamente, dichiareremo una funzione chiamata "SelectValue ()". Qui useremo il "documento.QuerySelector ()"Metodo per accedere all'ID del menu a discesa creato. Successivamente, otterremo il valore del genere selezionato dall'elenco a discesa usando "valore" proprietà. Infine, il "TextContent"La proprietà restituirà il contenuto di testo del valore selezionato e lo visualizzerà:
L'output dell'implementazione di cui sopra risulterà come segue:
Metodo 2: recuperare il valore selezionato dal menu a discesa in JavaScript utilizzando la proprietà "SelectedIndex"
IL "opzione"La proprietà restituisce una raccolta di tutti gli elementi e il"SelectedIndex"La proprietà restituisce l'indice dell'opzione selezionata da"opzione"Proprietà in un elenco a discesa. Useremo entrambi insieme per selezionare un'opzione specificata e visualizzare il valore dell'opzione corrispondente accedendo al suo indice.
Sintassi
Selezionare.Opzioni [Seleziona.SelectedIndex].valore
La sintassi di cui sopra contribuirà a recuperare il valore dell'opzione di menu a discesa selezionata utilizzando il suo indice.
Guarda il seguente esempio per la dimostrazione:
Esempio
Ora utilizzeremo lo stesso codice HTML indicato nell'esempio precedente e apporteremo alcune modifiche nel codice JavaScript. Per farlo, definiremo la funzione "SelectValue ()"E accedi all'ID assegnato del menu a discesa denominato"Selezionare"Con l'aiuto del documento.Metodo QuerySelector (). Dopodiché, useremo il "opzioni"Proprietà in combinazione con altre proprietà, tra cui"SelectedIndex"Per recuperare il valore dell'opzione selezionata.
Infine, il "TextContent"La proprietà verrà utilizzata in questo metodo per restituire il contenuto di testo del valore selezionato e visualizzare il valore corrispondente:
Produzione
Abbiamo fornito i metodi più semplici per recuperare un valore selezionato dal menu a discesa in JavaScript.
Conclusione
Per ottenere/recuperare il valore selezionato dal menu a discesa in JavaScript, applica il "valore"Proprietà per ottenere il valore dell'elemento selezionato dall'elenco a discesa e"opzione"Proprietà insieme al"SelectedIndex"Proprietà per ottenere il set di opzioni e ottenere il valore dell'opzione selezionata accedendo all'indice della particolare opzione. Questo articolo ha spiegato i metodi per ottenere/recuperare i valori selezionati dal discesa in JavaScript.