点击按钮更改选定选项

Question

当点击一个按钮时，我希望将选择列表中的选定选项更改为所点击的按钮对应的选项。

这是我目前拥有的：jsfiddle

$('#btnCityAuckland').click(function(){
    $('#City').val('A');
})

我确实有一些jQuery，但可能还远远不够正确，因为它不可能那么简单。

- Jamesil

Answer 1

$('#btnAuckland').click(function(){ 
    $('#City').val('A').trigger('change');
})​

显然，你只需在设置值后调用.trigger()方法即可。

示例：http://jsfiddle.net/8RUBj/11/

编辑
而且，最好使用data属性来设置值和类别，然后可以一次性完成所有按钮的操作。

$('.select-change').click(function(){ 
    $('#City').val($(this).data('val')).trigger('change');
})​

演示版本2: http://jsfiddle.net/8RUBj/15/

- ahren

---

正是我想要的。以前从未见过使用.trigger()。我学到了新东西 :) 非常感谢！ - Jamesil

Answer 2

你的代码是正确的，只是你打错了 $('#btnCityAuckland') ，它的确是：

$('#btnAuckland')

工作中演示

您还可以根据单击的按钮自动选择选项，而不是硬编码ID，像这样：

$('div > a').click(function(){ //click handler for all city buttons
    $("#City option:contains('"+$(this).text()+"')").attr("selected",true);
    $("#City").selectmenu('refresh', true); //Refresh to show name on select
})​

这是一个涉及IT技术的示例

。

- Nelson

---

是的，值发生了变化，但这并不是一个可见的变化。（选择器没有更新，需要手动触发。感谢jQuery Mobile。） - ahren

谢谢Nelson，我完全同意Ahren的看法。 - Jamesil

@Jamesil 我已经添加了必要的刷新调用，以便选择器能够捕捉到更改。你可以在我的最后一段代码中看到它，查看我的更新答案。 - Nelson

Answer 3

如果您不使用jQuery Mobile，您的代码将按原样工作。使用jQuery Mobile，您可以通过调用以下方式使伪选择器刷新：.selectmenu("refresh")：

$('div[data-role="controlgroup"] a').click(function(){
      $('#City').val( $(this).text().charAt(0) ).selectmenu("refresh");
});

演示：http://jsfiddle.net/8RUBj/18/

请注意，您不需要为每个按钮分配单独的点击处理程序：出于演示目的，我展示了一种相当笨拙的方法，使代码更加通用，以便在不更改HTML的情况下工作，但是您可以添加data-属性或其他内容来指示与每个值相关联的值。

有关jQuery Mobile选择方法的更多信息。

- nnnnnn

---

+1 - 没有注意到第一个字符和选择值之间的关联！ - ahren

谢谢 @ahren。显然，如果还有其他以相同字母开头的城市，那么首字母的方法就不适用了，因为它们在选择器中必须具有不同的值。但正如我上面所说，这只是一种使代码更通用的演示方式之一... - nnnnnn