jQuery Evidenzia l'elemento sull'opzione di selezione

Question

Ho un elenco di valori in una casella di selezione dello stile a discesa, ad es.

<select id="places">
<option>Italy</option>
<option>France</option>
<option>Germany</option>
<option>Spain</option>
</select>

Ho anche lo stesso elenco di valori in un div sulla mia pagina per es.

<div>
<span>Italy</span>
<span>France</span>
<span>Germany</span>
<span>Spain</span>
</div>

Usando JQuery, voglio averlo così - quando viene selezionato un valore nel menu a discesa, l'opzione equivalente nel div viene brevemente evidenziata.

Ho avuto difficoltà con il plugin highlight di jQuery, ma credo che il modo più veloce potrebbe essere quello di utilizzare la classe highlight dell'interfaccia utente di JjQuery. Ci scusiamo in anticipo per essere un noob :)

Answer 1

Uso dell'effetto dall'interfaccia utente di jQuery :

$('#places').change(function() {
  $('div span:contains(' + $(this).val() + ')').effect('highlight', {}, 1000)
})

Quando viene selezionato un elemento dal menu a discesa, l'intervallo contenente il rispettivo testo dell ' elemento selezionato viene eseguita un'animazione del colore di sfondo (effetto "evidenzia "") fornito dal plug-in.

Demo qui.

Answer 2

Utilizzando il plug-in dell'interfaccia utente di JQuery è possibile utilizzare quanto segue

$('#places').change(function(){
    $('span:contains('+ $(this).val() +')').effect('highlight', {color: 'red'}, 3000);
});

Cambia il colore e 3000 come richiesto.