Remplacement du menu jQuery Select

Question

J'ai un menu déroulant de sélection qui sélectionne un thème pour la page en cours sur laquelle l'utilisateur se trouve:

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

Maintenant, ce que je voudrais faire est d’ajouter deux divs qui vont également contrôler ce menu de sélection. Je préférerais de beaucoup que l’utilisateur sélectionne entre deux images plutôt qu’un menu de sélection. Les divs sont les suivants:

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

Je voudrais utiliser jQuery pour masquer le menu de sélection tout en utilisant ses entrées. De plus, j'aimerais que les div contrôlent la valeur des menus et affichent l'état sélectionné. Faites-moi savoir le moyen le plus simple d'utiliser jQuery ou JavaScript.

Merci d'avance.

-B

Answer 1

Si vous avez toutes les images dans le même ordre que les options de la sélection, vous pouvez obtenir quelque chose comme ceci (en supposant que la version jQuery > = 1.3 et < 1.4, car index fait ce qu’elle devrait être. )

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

Utilisation de ce plugin: http://dev.jquery.com/browser/trunk / plugins / selectboxes Vous pouvez faire ceci:

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