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를 사용하여 수행 할 수있는 가장 쉬운 방법을 알려주십시오.

미리 감사드립니다.

-비

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