选择选项上的jQuery Highlight元素 [英] jQuery Highlight element on select option

问题描述

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

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>

我的页面上的div中也有相同的值列表 例如

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>

使用JQuery，我希望这样-选择下拉列表中的值时，将简要突出显示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 Highlight插件，但是我认为更快的方法可能是使用JjQuery UI的Highlight类.预先为菜鸟道歉:)

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

推荐答案

使用来自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.

此处演示.

这篇关于选择选项上的jQuery Highlight元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！