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