jQuery Surligner l'élément sur l'option de sélection

Question

J'ai une liste de valeurs dans une zone de sélection de style déroulante, par exemple

.

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

J'ai également la même liste de valeurs dans un div sur ma page par exemple

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

À l’aide de JQuery, je souhaite que cela soit ainsi: lorsqu’une valeur du menu déroulant est sélectionnée, l’option équivalente du div est brièvement mise en surbrillance.

J'ai eu du mal à utiliser le plugin jQuery highlight, mais je pense que le moyen le plus rapide consiste à utiliser la classe de surbrillance de JjQuery UI. Toutes mes excuses pour être un noob :)

Answer 1

Utilisation de l’ effet de surbrillance de l'interface utilisateur jQuery :

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

Lorsqu'un élément du menu déroulant est sélectionné, l'envergure du contenant le texte correspondant. de l'élément sélectionné est exécuté via une animation de sa couleur d'arrière-plan (effet "surbrillance") fourni par le plugin.

Faites une démonstration ici.

Answer 2

En utilisant le plug-in JQuery UI, vous pouvez utiliser les éléments suivants

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

Modifiez la couleur et 3000 si nécessaire.