Question

单击按钮我想要更改选择列表中的选定选项以对应于单击的按钮。这是我到目前为止所拥有的，jsfiddle

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

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

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

演示v2：http://jsfiddle.net/8RUBj/15/

Answer 2

您的代码是正确的，只是您错误输入$('#btnCityAuckland')，它确实是：

$('#btnAuckland')

工作demo

你也可以根据点击的按钮自动选择选项，而不是硬编码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
})

工作demo

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-属性或其他内容，以指示与每个属性关联的值。

More information about jQuery Mobile select methods

更改按钮单击时选择的选项

3 个答案: