Выделите элемент 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, но я полагаю, что более быстрым способом может быть использование класса подсветки пользовательского интерфейса JjQuery. Заранее извиняюсь за то, что являюсь нубом :)

Answer 1

Использование эффекта выделения из пользовательского интерфейса jQuery :

$('#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, как требуется.