选择选项上的jQuery Highlight元素

Question

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

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

我的页面上的div中也有相同的值列表 e.g。

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

使用JQuery，我希望如此 - 当选择下拉列表中的值时，会简要突出显示div中的等效选项。

我一直在努力使用jQuery高亮插件，但我相信更快的方法可能是使用JjQuery UI的高亮类。事先抱歉做个菜鸟：）

Answer 1

使用突出显示jQuery UI的效果：

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

当选择下拉菜单中的某个项目时，包含相应文字的范围所选项目通过其背景颜色的动画（“突出显示”效果）运行由插件提供。

在此进行演示。

Answer 2

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

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

根据需要更改颜色和3000。