選擇選項上的jQuery高亮元素

Question

我在下拉樣式選擇框中列出了一些值，例如：

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

我也有我的 頁例如在值的一個div同一列表

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

使用jQuery，我想有這麼 - 當選擇在下拉列表中的值，在div的等效選項是簡單地突出顯示。

我一直在努力與jQuery高亮插件，但我相信更快的方式可能是使用JjQuery UI的高亮類。道歉提前，作爲一個菜鳥:)

Answer 1

使用highlight effect from jQuery UI：

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

當選擇從下拉列表中的項目，跨度containing的selected item的相應文本通過的動畫運行它的背景顏色（「高亮」效果）由插件提供。

Demo here.

Answer 2

使用jQuery UI插件，您可以使用下面的

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

改變顏色，並根據需要3000。