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 来隐藏选择菜单，但仍然使用它的输入。此外，我希望 div 控制菜单值并显示选定状态。请告诉我使用 jQuery 或 JavaScript 最简单的方法。

提前致谢。

-B

Answer 1

使用这个插件：http://dev.jquery.com/browser/trunk/plugins/selectboxes 你可以这样做：

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

Answer 2

如果所有图像的顺序与选择中的选项相同，则可以这样做（假设 jQuery 版本 >= 1.3 和

$("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);

});