jQuery Selezionare Sostituzione menu

Question

Ho un menu a discesa che seleziona un tema per la pagina corrente su cui si trova l'utente:

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

Ora quello che vorrei fare è aggiungere due div che controlleranno anche questo menu di selezione. Preferirei che l'utente selezionasse tra due immagini piuttosto che un menu di selezione. I div sono i seguenti:

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

Vorrei usare jQuery per nascondere il menu di selezione ma usare comunque il suo input. Inoltre vorrei che i div controllassero il valore dei menu e mostrassero uno stato selezionato. Per favore fatemi sapere il modo più semplice che questo può essere fatto usando jQuery o JavaScript.

Grazie in anticipo.

-B

Answer 1

se hai tutte le immagini nello stesso ordine delle opzioni nella selezione potresti così qualcosa del genere (supponendo la versione jQuery > = 1.3 e < 1.4 perché l'indice ora fa quello che dovrebbe )

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

Utilizzo di questo plug-in: http://dev.jquery.com/browser/trunk / plugins / caselle di selezione Puoi farlo:

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