Замена меню выбора jQuery

Question

У меня есть раскрывающийся список выбора, который выбирает тему для текущей страницы, на которой находится пользователь:

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

Теперь я хотел бы добавить два элемента div, которые также будут управлять этим меню выбора.Я бы предпочел, чтобы пользователь выбирал между двумя изображениями, а не меню выбора.Дивы следующие:

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

Я хотел бы использовать jQuery, чтобы скрыть меню выбора, но при этом использовать его ввод.Также я хотел бы, чтобы элементы управления контролировали значение меню и отображали выбранное состояние.Пожалуйста, дайте мне знать, как проще всего это сделать с помощью jQuery или JavaScript.

Заранее спасибо.

-Б

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