javascript - 選択オプションの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ハイライトプラグインに苦労してきましたが、より迅速な方法はJjQueryUIのハイライトクラスを使用することだと思います。初心者であることを事前に謝罪します:)

score 6 · Accepted Answer

jQuery UIのハイライト効果を使用する：

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

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

score 0 · Accepted Answer

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

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

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

2 に答える 2