jQuery Highlight Element bei der Auswahl der Option

Question

Ich habe eine Liste von Werten in einem Drop-Down-Stil Auswahlfeld z.

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

Ich habe auch die gleiche Liste von Werten in einem div auf meiner Seite z.

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

Mit JQuery, will ich es habe so - wenn ein Wert in der Dropdown-Liste ausgewählt wird, wird die entsprechende Option im div ist kurz hervorgehoben.

Ich habe mit der jQuery-Plugin Highlight zu kämpfen, aber ich glaube, der schnelle Weg, um die Highlight-Klasse von JjQuery UI zu verwenden sein kann. Apologies im Voraus für ein noob zu sein:)

Answer 1

die Effekt von jQuery UI markieren:

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

Wenn ein Element aus der Drop-down ausgewählt ist, die Spanne enthält den jeweiligen Text der Element ausgewählt durch eine Animation der Hintergrundfarbe ( „Highlight“ -Effekt) ausgeführt wird bereitgestellt durch die Plug-In.

Demo hier.

Answer 2

Mit JQuery UI-Plugin können Sie das folgende

verwenden

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

Ändern Sie die Farbe und 3000 je nach Bedarf.