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

如果所有图像的顺序与选择中的选项相同，那么就是这样（假设jQuery版本<！> gt; = 1.3和<！> lt; 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 /插件/ selectboxes 你可以这样做：

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