Question

I have a list of values in a drop down style select box e.g.

<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
e.g.

<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.