jQuery sélectionnez l'option avec le bouton

Question

Est-il possible de sélectionner l'élément spécial <option> avec jQuery en appuyant sur le bouton?

Par exemple:

<a id="item1" href="#">Item 1</a> 
<a id="item2" href="#">Item 2</a> 
<a id="item3" href="#">Item 3</a> 

<form> 
....... 
<select id="items" name="items"> 
<option value="1">I dont know</option> 
<option value="2">Item 1</option> 
<option value="3">Item 2</option> 
<option value="4">Item 3</option> 
</select> 
......... 

</form> 

Si vous appuyez sur le deuxième bouton que sous forme sélectionne automatiquement la deuxième option. C'est possible?

Answer 1

Ceci est un moyen simple jQuery de le faire.

$('a').click(function() { 
    var select_num = $(this).index() + 1; 
    $('#items option').eq(select_num).attr('selected', 'selected'); 
}); 

Voici l'exemple fiddle.

Answer 2

Essayez ce (article 2 lien sélectionne le point 2 dans la liste):

$('#item2').click(function(){ 
    $('#items option:nth-child(3)').attr('selected', 'selected'); 
}); 

et fonction similaire pour chaque bouton/lien.

Answer 3

Essayez ceci:

$('#item1').click(function() { 
    $('#items option[value="2"]').attr('selected', true); 
}); 

Voir ici: http://jsfiddle.net/RVUDa/

Answer 4

Enveloppez vos balises dans un élément de bloc avec un id. Cela vous aidera à le rendre plus efficace lorsque vous aurez cliqué sur un grand nombre d'éléments car il s'agit d'un seul écouteur au lieu d'un seul écouteur pour chaque élément de la liste.

<div id="buttons"> 
    <a id="item1" href="#">Item 1</a> 
    <a id="item2" href="#">Item 2</a> 
    <a id="item3" href="#">Item 3</a> 
</div> 

ensuite votre code jQuery, vous pouvez le faire:

$('#buttons').click(function(e) 
{ 
    var num = $(e.target).index() + 1; 
    $('option:nth-child(' + num + ')', '#items').attr('selected', 'selected'); 
});