jQuery选择按钮选项

时间:2011-08-09 15:42:46

标签: jquery select options

是否可以通过按下按钮选择带有jQuery的特殊<option>项目?

例如:

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

如果按第二个按钮而不是表单自动选择第二个选项。有可能吗?

4 个答案:

答案 0 :(得分:3)

这是一种简单的jQuery方法。

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

以下是示例fiddle.

答案 1 :(得分:0)

试试这个(第2项链接选择列表中的第2项):

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

每个按钮/链接的类似功能。

答案 2 :(得分:0)

试试这个:

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

见这里:http://jsfiddle.net/RVUDa/

答案 3 :(得分:0)

将标签包装在带有id的块元素中。当你有很多项目要点击时,这将有助于提高效率,因为它只是一个监听器,而不是列表中每个项目的一个监听器。

<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');
});