MICHELEPISANI.IT
 

Partite dal presupposto che dataList non è un elemento di selezione

Recuperare il valore dell'elemento selezionato da una dataList

Recuperare il valore dell'elemento selezionato da una dataList
Luglio 28
07:312016

L'elemento HTML5 chiamato dataList è utilizzato per fornire valori preimpostati da associare come scelta ad un campo di input. Questo significa anche che tale elemento non è una select e per questo motivo il recupero del valore, in Javascript, dell'opzione selezionata non segue gli stessi principi solitamente utilizzati in caso di dropdown o combobox.
Nell'esempio seguente mostro una possibilità di recupero del valore dell'opzione selezionata, in puro Javascript, così da poterlo gestire a runtime e procedere con eventuali operazioni (ad esempio la visualizzazione di particolari campi in base alla selezione effettuata dall'utente) per raggiungere il risultato desiderato. Nel caso specifico, sapendo che il valore dell'opzione selezionata diventerà automaticamente quello dell'elemento di input, lo vado a recuperare dall'attributo value di quest'ultimo.
Se invece volessimo recuperare un altro eventuale attributo presente nell'opzione selezionata (ad esempio data), ua soluzione potrebbe essere quella di recuperare il valore come appena spiegato, dopodichè effettuare un ciclo sulle option dell'elemento dataList, di nostro interesse recuperabile tramite il suo id, e andare a prendere il contenuto dell'attributo di interesse laddove il valore dell'option corrisponda a quello del campo di input.

Con il codice seguente selezionando un'opzione questa apparirà oltre che, come di consueto, nel campo di input anche nell'elemento di tipo span con id "result":

Codice HTML:

<input list="myDatalist" id="myDatalist-input">
<datalist id="myDatalist">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<br /><br />
<div id="result"></div>

Codice Javascript:

document.getElementById('myDatalist-input').addEventListener('input', function () {
  var element_selected = document.getElementById('myDatalist-input').value;
  document.getElementById('result').innerHTML = "Hai selezionato l'opzione: " + element_selected;
});

Se volete testare live il codice appena esposto potete fare fede a questo JSFiddle nel quale ho riportato fedelmente l'esempio:

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Francesco

Ciao Michele, ti ringrazio per l'articolo. Potresti spiegare il significato della parte …

Michele

Ciao domenico,
hai provato con

Michele

Ciao Luca,
hai provato a contattare l'assistenza di Facebook? Attualmente la via migliore …

domenico

ciao, puoi aiutarmi?

ho creato un form che tramite una chiamata mi restituisce una …