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, чтобы скрыть меню выбора, но все же использовать его ввод. Также я хотел бы, чтобы div управлял значением меню и отображал выбранное состояние. Пожалуйста, дайте мне знать, как проще всего это сделать с помощью jQuery или JavaScript.

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

-B

Answer 1

если у вас есть все изображения в том же порядке, что и параметры в выделенной области, вы можете сделать что-то вроде этого (предполагая, что jQuery версия> = 1.3 и <1.4, потому что index теперь делает то, что должен) </p>

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