2011-08-09 17 views
3

ボタンを押してjQueryで特別な<option>アイテムを選択することはできますか?例えばボタンでjQueryを選択するオプション

<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> 

フォームよりも第2のボタンを押すと、自動的に2番目のオプションを選択します。出来ますか?各ボタン/リンクの

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

と同様の機能:

答えて

3

をこれはそれを行うための簡単なjQueryの方法です。ここ

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

は、例えばfiddle.

0

はこれを(項目2リンクはリスト内の項目2を選択)してください。

+0

であり、これはあります。動的に動作するようにそれらを作成する方法に関する考え方はありますか? – Phil

+0

動的に行う方法については、私の記事を見てください。 – Kyle

0

はこれを試してみてください:

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

はこちらをご覧ください:http://jsfiddle.net/RVUDa/

+0

これは静的です... – Phil

0

はidを持つブロック要素にタグを包みます。これは、リスト内の各項目の1つのリスナーではなく、1つのリスナーであるため、クリックするアイテムが多い場合に効率的になります。

<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> 

は、その後、あなたのjQueryのコードのために、あなたがこれを行うことができます:

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