选择选项上的jQuery突出显示元素答案

【问题标题】：jQuery Highlight element on select option选择选项上的jQuery突出显示元素
【发布时间】：2010-12-20 17:20:49
【问题描述】：

我在下拉样式选择框中有一个值列表，例如

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

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.

我一直在努力使用 jQuery 高亮插件，但我相信更快的方法可能是使用 JjQuery UI 的高亮类。作为菜鸟提前道歉:)

【问题讨论】：

【解决方案1】：

使用highlight effect from jQuery UI：

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

当从下拉列表中选择一个项目时，跨度containing selected item 的相应文本通过插件提供的背景颜色动画（“突出显示”效果）运行。

【讨论】：

【解决方案2】：

使用 JQuery UI 插件，您可以使用以下内容

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

根据需要更改颜色和3000。

【讨论】：