8

单击按钮时，我想将选择列表中的选定选项更改为与单击的按钮相对应。这就是我到目前为止所拥有的， jsfiddle

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

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

4

3 回答 3

22 
$('#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/

于 2012-10-03T07:46:05.813 回答
3

您的代码是正确的，只是您输入错误$('#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
})​

工作演示

于 2012-10-03T07:41:52.440 回答
1

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

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

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

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

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

于 2012-10-03T07:50:53.090 回答