選択オプションのjQuery Highlight要素

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のハイライトクラスを使用する方が簡単だと考えています。初心者であることをおadvanceびします：）

Answer 1

jQuery UIからのハイライト効果の使用：

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

ドロップダウンから項目が選択されると、スパンそれぞれのテキストを含む 選択されたアイテムの背景色のアニメーション（＆quot;ハイライト＆quot;効果）プラグインによって提供されます。

デモはこちら

Answer 2

JQuery UIプラグインを使用すると、次を使用できます

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

必要に応じて色と3000を変更します。