javascript - 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 版本 >= 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);

});