jQuery 单击按钮时更改所选选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12703918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing selected option on button click
提问by Jamesil
On click of a button I'm wanting to change the selected option in a select list to correspond to the button that was clicked. This is what I have so far, jsfiddle
单击按钮时，我想更改选择列表中的选定选项以对应于单击的按钮。这是我到目前为止所拥有的， jsfiddle
$('#btnCityAuckland').click(function(){
$('#City').val('A');
})
I do have some jQuery there, but its probably miles off being right as it cant be that simple.
我确实有一些 jQuery，但它可能是正确的，因为它不可能那么简单。
回答by ahren
$('#btnAuckland').click(function(){
$('#City').val('A').trigger('change');
})?
Apparently you can just call the .trigger()method after setting the value.
显然，您可以.trigger()在设置值后调用该方法。
Demo: http://jsfiddle.net/8RUBj/11/
演示：http: //jsfiddle.net/8RUBj/11/
EDIT
Also, it's better if you use dataattributes to set the value, and classes, and then you can do all your buttons in one go.
编辑
此外，最好使用data属性来设置值和类，然后您可以一次性完成所有按钮。
$('.select-change').click(function(){
$('#City').val($(this).data('val')).trigger('change');
})?
Demo v2: http://jsfiddle.net/8RUBj/15/
演示 v2：http: //jsfiddle.net/8RUBj/15/
回答by Nelson
Your code is right, just that you mistyped $('#btnCityAuckland'), it really is:
你的代码是对的，只是你打错了$('#btnCityAuckland')，它真的是：
$('#btnAuckland')
Working demo
工作演示
You could also automate selecting the option based on the button clicked, instead of hardcoding the ID's, like so:
您还可以根据单击的按钮自动选择选项，而不是对 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
})?
Working demo
工作演示
回答by nnnnnn
If you weren't using jQuery Mobile your code would work as is. With jQuery Mobile you can make the pseudo-select refresh by calling .selectmenu("refresh")on it as follows:
如果您没有使用 jQuery Mobile，您的代码将按原样运行。使用 jQuery Mobile，您可以通过.selectmenu("refresh")如下调用来刷新伪选择：
$('div[data-role="controlgroup"] a').click(function(){
$('#City').val( $(this).text().charAt(0) ).selectmenu("refresh");
});
Demo: http://jsfiddle.net/8RUBj/18/
演示：http: //jsfiddle.net/8RUBj/18/
Note that you don't need to assign a separate click handler for each button: for demonstration purposes I've shown a rather clunky way of making the code more generic such that it will work without changing your html, but you could add data-attributes or something to the buttons to indicate what value is associated with each.
请注意，您不需要为每个按钮分配一个单独的点击处理程序：为了演示目的，我展示了一种使代码更通用的笨拙方法，这样它就可以在不更改 html 的情况下工作，但您可以添加data-属性或按钮的某些内容以指示与每个相关联的值。
