Выделите элемент 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, как требуется.