jQuery的選擇菜單更換

Question

我有一個選擇下拉式選單，選擇在當前頁面的用戶是圍繞着一個主題：

<select id="style" name="acct-stylenum"> 
    <option value="1" selected="true">Light</option> 
    <option value="2">Dark</option>     
</select> 

現在我想要做的就是添加兩個div也將控制這個什麼選擇菜單。我寧願讓用戶在兩個圖像之間進行選擇，而不是選擇菜單。該div如下：

<div class="style-box light"></div> 
<div class="style-box dark"></div> 

我想使用jQuery隱藏選擇菜單，但仍然使用其輸入。此外，我想divs來控制菜單值並顯示選定的狀態。請讓我知道這可以使用jQuery或JavaScript完成的最簡單的方法。

在此先感謝。

-B

Answer 1

，如果你有相同的順序在選擇的選項的所有圖像，你會這麼像這樣（假設jQuery的版本> = 1.3和1.4 <因爲指數現在做什麼它應）

$("div.style-box").live('click', function() { 

    //get index of div clicked 
    var index = $(this).prevAll().length; 

    //select the corresponding option in the hidden select 
    $('#style>option').eq(index).attr('selected', true); 

}); 

Answer 2

使用這個插件：http://dev.jquery.com/browser/trunk/plugins/selectboxes 你可以這樣做：

$("#style-box-light").click(function() { 
    $("#style").selectOptions("1"); 
});