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/

EDIT
また、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 select メソッドの詳細。

于 2012-10-03T07:50:53.090 に答える