更改點擊按鈕上的選定選項

點擊按鈕我想更改選擇列表中的選定選項以對應於單擊的按鈕。這是我到目前爲止，jsfiddle 更改點擊按鈕上的選定選項

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

我有一些jQuery的存在，但它可能英里外是正確的，因爲它不能是簡單的。

來源

2012-10-03 Jamesil

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

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

來源

2012-10-03 07:46:05 ahren

完全是我以後的事。以前沒有見過使用.trigger（）。我學到了新的東西:)謝謝堆！ – Jamesil

@Jamesil - 檢查更新。它更有幫助。 – ahren

你的代碼是正確的，只是你輸錯$('#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

來源

2012-10-03 07:41:52 Nelson

是的值變化，但它不是一個可見的變化。（選擇不更新，需要手動觸發。感謝jQuery Mobile。） – ahren

謝謝尼爾森，並完全同意ahren。 – Jamesil

@Jamesil我已經添加了必要的刷新調用，以便選擇選擇更改。你可以在我最後的代碼中看到它，看到我更新的答案。 – Nelson

如果你沒有使用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。

來源

2012-10-03 07:50:53 nnnnnn

+1 - 沒有注意到第一個字符和選擇值之間的相關性！ – ahren

感謝@ahren。顯然，如果有更多的城市以相同的字母開頭，第一個字母的東西就不會起作用，因爲他們必須在選擇中有不同的值，但正如我上面所說的那樣，這僅僅是一種代碼的示例更通用... – nnnnnn

更改點擊按鈕上的選定選項

回答

相關問題