jQuery Selectメニューの置換

Question

ユーザーが現在いるページのテーマを選択する選択ドロップダウンがあります：

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

次に、この選択メニューを制御する2つのdivを追加します。むしろ、選択メニューよりもユーザーに2つの画像の間で選択してもらいたいです。 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 / plugins / selectboxes これを行うことができます：

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