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

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.

2 Commenti

  1. andrea giovedì 16 settembre 2021 alle ore 14.50

    Ciao Michele, nel mio caso ho una datalist popolata tramite una query sql.. non riesco a capire come recuperare il valore selezionato tramite php per poi completare l'inserimento in una tabella..

    Rispondi a questo commento
    • Michele PisaniAutore giovedì 16 settembre 2021 alle ore 22.07

      Ciao andrea,
      in PHP il concetto è diverso. Dovresti modificare la funzione in modo da chiamare in ajax una pagina esterna passando il valore selezionato, ed è in quella pagina che potrai utilizzare il PHP per effettuare le tue operazioni.

      Rispondi a questo commento

Scrivi un Commento

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

Articoli e Argomenti correlati

Il Canale YouTube in ITALIANO

1 VIDEO GRATIS ogni 2 settimane! ISCRIVITI!

Entra a far parte della community su Facebook

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

Michele Pisani

Ciao nico, io lo sto usando tutt'ora anche con gli ultimi aggiornamenti del SO. Ti confermo che …

nico

non funziona, esce ala scritta errore di configurazione disinstallare e re installare il …

Michele Pisani

Ciao andrea, in PHP il concetto è diverso. Dovresti modificare la funzione in modo da chiamare in …

andrea

Ciao Michele, nel mio caso ho una datalist popolata tramite una query sql.. non riesco a capire …