elemento Destaque jQuery on selecione a opção

Question

Eu tenho uma lista de valores em uma caixa suspensa selecione estilo exemplo para baixo.

<select id="places">
<option>Italy</option>
<option>France</option>
<option>Germany</option>
<option>Spain</option>
</select>

Eu também tenho a mesma lista de valores em uma div na minha página por exemplo.

<div>
<span>Italy</span>
<span>France</span>
<span>Germany</span>
<span>Spain</span>
</div>

Usando JQuery, eu quero que seja assim - quando um valor na lista suspensa for selecionada, a opção equivalente na div é brevemente destacada.

Eu estive lutando com o plugin jQuery destaque, mas acredito que a maneira mais rápida pode ser usar a classe destaque do JjQuery UI. Desculpas antecipadamente para ser um noob:)

Answer 1

Usando o href="http://jqueryui.com/demos/effect/" rel="nofollow noreferrer"> efeito destaque :

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

Quando um item a partir do drop-down é selecionado, o tempo contendo o respectivo texto do item selecionado é executado através de uma animação de sua cor de fundo (efeito de "destaque") forneceu pelo plug-in.

demonstração aqui.

Answer 2

Usando JQuery UI plugin que você pode usar o seguinte

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

Alterar a cor e 3000, conforme necessário.