Ottieni il valore corrente dal datalist onhover

Question

Sto cercando di ottenere il valore corrente dell'elemento al passaggio del tempo da un datalist. Quindi, se apro il datalist con i valori al suo interno e sposta il mouse su di essi, voglio che i valori appaiano nella console.

Questo è il mio tentativo:

<input list="browsers" id="browser"> 
<datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist> 

$("#browsers").on("mouseover", function() { 
    console.log($(this).value()); 
}); 

Ed ecco un violino: https://jsfiddle.net/sshcvr5q/

Answer 1

Non sono sicuro che ciò sarà possibile. Opzioni del datalist, mentre sono ancora visibili nell'albero DOM del documento principale, ottenere clonati e encapsulated come parte di un albero Shadow DOM e come non sono accessibili dal documento principale. Sono questi nodi DOM shadow incapsulati che stai effettivamente passando sopra (sicuramente in Chrome comunque), e il nodo originale nell'albero DOM principale non viene attivato con un evento mouseover o hover quando passi il mouse sui nodi DOM ombra.

Se si utilizza Chrome DevTools per ispezionare la struttura DOM nel tuo esempio JSFiddle, si può vedere la radice ombra del DOM albero incapsulato:

Vedi this explanation da un'altra domanda Stack Overflow per ulteriori informazioni sul motivo per cui non puoi ascoltare gli eventi sul DOM ombra dal documento principale.

Answer 2

penso che controlla $("#browser") e non $("#browsers")

Ma in ogni caso si riceverà il valore onchange meglio :)

Saluti