선택 옵션의 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 UI의 하이라이트 클래스를 사용하는 것일 수 있다고 생각합니다. 멍청이가 된 것에 대해 미리 사과합니다 :)

Answer 1

사용 jQuery UI의 하이라이트 효과:

$('#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을 변경하십시오.