选择选项上的jQuery Highlight元素

Question

I have a list of values in a drop down style select box eg

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

I also have the same list of values in a div on my page eg

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

Using JQuery, I want to have it so - when a value in the dropdown is selected, the equivalent option in the div is briefly highlighted.

I've been struggling with the jQuery highlight plugin, but I believe the quicker way may be to use the highlight class of JjQuery UI. Apologies in advance for being a noob :)

Answer 1

Using the highlight effect from jQuery UI :

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

When an item from the drop-down is selected, the span containing the respective text of the selected item is run through a animation of its background color ("highlight" effect) provided by the plugin.

Demo here.

Answer 2

Using JQuery UI plugin you can use the following

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

Change the color and 3000 as required.