jQuery Sélectionnez Menu Remplacement

Question

J'ai une liste déroulante de sélection qui sélectionne un thème pour la page en cours de l'utilisateur est sur:

<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 contrôle aussi ce sélectionnez le menu. Je préfère que l'utilisateur choisisse entre deux images plutôt qu'un menu de sélection. Les divs sont les suivantes:

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

Je voudrais utiliser jQuery pour faire le menu de sélection caché, mais toujours utiliser son entrée. Aussi, j'aimerais que les divs contrôlent la valeur des menus et affichent un état sélectionné. S'il vous plaît laissez-moi savoir la façon la plus simple cela peut être fait en utilisant 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 que vous pourriez donc quelque chose comme ça (en supposant que la version jQuery> = 1.3 et 1.4 < parce que l'indice fait maintenant ce qu'il devrait)

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

Grâce à ce plugin: http://dev.jquery.com/browser/trunk/plugins/selectboxes Vous pouvez faire ceci:

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