Reemplazo del menú jQuery Select

Question

Tengo un menú desplegable de selección que selecciona un tema para la página actual en la que se encuentra el usuario:

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

Ahora lo que me gustaría hacer es agregar dos divs que también controlarán este menú de selección. Prefiero que el usuario seleccione entre dos imágenes que un menú de selección. Los divs son los siguientes:

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

Me gustaría usar jQuery para ocultar el menú de selección, pero aún así usar su entrada. También me gustaría que los divs controlen el valor de los menús y muestren un estado seleccionado. Avíseme de la manera más fácil que se puede hacer con jQuery o JavaScript.

Gracias de antemano.

-B

Answer 1

si tiene todas las imágenes en el mismo orden que las opciones en la selección, podría hacer algo como esto (suponiendo que jQuery versión > = 1.3 y < 1.4 porque index ahora hace lo que debería) )

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

Uso de este complemento: http://dev.jquery.com/browser/trunk / plugins / selectboxes Puedes hacer esto:

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