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 :)

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 :)

• javascript
• jquery
• select
• release
• highlight

Share Improve this question Follow asked Nov 26, 2009 at 14:58 Ashley WardAshley Ward 111 silver badge22 bronze badges 1

• "briefly highlighted" - .1 second, 1 minute, describe what this means. Please show what you have attempted (code wise) at this point. – Mark Schultheiss Commented Nov 26, 2009 at 15:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

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.