In questo caso abbiamo una pagina web in cui è presente un menu a tendina di cui vogliamo conoscere il valore selezionato dall’utente.
La struttura del tag HTML è la seguente:
<select class="form-select">
<option selected>Seleziona una voce</option>
<option value="1-Auto">Auto</option>
<option value="2-Moto">Moto</option>
<option value="3-Bicicletta">Bicicletta</option>
</select>Grazia a JavaScript possiamo ottenere il valore della selezione del menu a discesa HTML selezionando il tag con un metodo di selezione (getElementById() in questo caso) e poi richiamando la proprietà selectedIndex.
Il codice JavaScript è il seguente:
var select = document.getElementById('trasporto');
var value = select.options[select.selectedIndex].value;
console.log(value);
Output
Se ipotiziamo che l’utente selezioni la voce Auto dal menu a tendina, in console avremo il seguente output:
1-Auto