jQuery Wählen Sie Menü Ersatz

Question

Ich habe eine Auswahldropdown dass der Benutzer auf ein Thema für die aktuelle Seite wählt:

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

, was Nun würde ich tun möchte, ist zwei divs hinzufügen, die auch dieses Auswahlmenü steuern. Ich hätte viel lieber den Benutzer wählen zwischen zwei Bildern als ein Auswahlmenü. Die divs sind wie folgt:

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

Ich möchte jQuery verwenden, um das Auswahlmenü versteckt zu machen, aber immer noch seine Eingabe verwenden. Auch würde ich die divs mag den Menü Wert zu steuern und einen ausgewählten Zustand zu zeigen. Bitte lassen Sie mich die einfachste Art und Weise weiß, kann dies mit jQuery oder JavaScript erfolgen.

Vielen Dank im Voraus.

-B

Answer 1

Wenn Sie alle Bilder in der gleichen Reihenfolge wie die Optionen in der Auswahl Sie könnte so etwas wie dieses (vorausgesetzt, jQuery-Version> = 1,3 und <1,4 weil Index jetzt tut, was es sollte)

$("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

Mit diesem Plugin: http://dev.jquery.com/browser/trunk / plugins / Select Sie können dies tun:

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