Activador de selección de HTML por un div o una image

Tengo un menu <select> similar al ejemplo a continuación:

 <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 

En algunos sitios web, he visto que este menu se puede activar a través de una image externa o div.

He buscado en google, pero casi todas las preguntas y respuestas están relacionadas con la forma de listr imágenes dentro de una selección, que no es lo que necesito . Quiero que aparezca el menu de selección cuando se hace clic en un DIV o una image.

¿Cómo puedo activar este menu de selección haciendo clic en otro elemento DOM, es decir, un div?

PD. Mi website ya tiene jQuery incluido.

Aquí codifiqué un script en JSFiddle para seleccionar fácilmente diferentes opciones de un menu desplegable mediante el uso de divs externos.

HTML:

 <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <nav> <div data-value="volvo">volvo</div> <div data-value="saab">saab</div> <div data-value="mercedes">mercedes</div> <div data-value="audi">audi</div> </nav> 

CSS:

 select { display:block; margin:0 0 10px; } div { padding:5px 10px; margin:0 0 5px; border:solid 1px #ccc; background:#eee; cursor:pointer; } 

JS:

 $(document).ready(function(){ var select = $("select"), value = ""; $("div").on("click",function(){ value = $(this).attr("data-value"); // Store the value of the clicked div select.find('option[value="'+ value +'"]') // Match the option with the value we get before .prop("selected",true) // Assign it selected attr .end() // Go back to the select .trigger("change"); // Trigger the change to see the change reflected on the select }); }); 

En function de este script, puede boost mucho las funcionalidades agregando, por ejemplo, URL a cada opción (por ej .: data-link = "http://google.com&quot😉 y window.location en el cambio, o cualquier cosa que desee .

De todos modos si quieres un complemento realmente kick-ass para hacerlo automáticamente, propongo el msDropdown ( Documentación aquí ).

Este plugin le permite crear selects personalizadas con imágenes, descripciones y muchas otras características, simplemente agréguelas con una label de selección o con información json. Hope es lo que estabas buscando.

Cuando dice "Quiero que aparezca el menu de selección", supongo que desea seleccionar un valor particular en la list desplegable / seleccionar, cuando el usuario hace clic en un div particular se hace clic.

Lo primero que debe hacer es dar una identificación a la label de selección (por ejemplo, "list desplegable"), y a cada opción en la list (digamos "opción1", "opción2", "opción3", "opción4"). Supongamos que hay 4 div diferentes (digamos "div1", "div2", "div3", "div4") que, onclick, seleccionan un valor diferente en la list desplegable. Puedes hacerlo –

$("#div1").on("click",function(){$("dropdownList").val("option1");}); $("#div2").on("click",function(){$("dropdownList").val("option2");}); $("#div3").on("click",function(){$("dropdownList").val("option3");}); $("#div4").on("click",function(){$("dropdownList").val("option4");});

Siempre puedes optimizarlo envolviendo los 4 div's en un div maestro llamado "masterDiv", y luego –

$("#masterDiv div").on("click",function(e){ $("#dropdownList option:selected").removeAttr("selected"); \\remove currently selected value $("#option"+e.target.id.charAt(e.target.id.length-1)).attr("selected","selected"); });

Espero que esto ayude.

Este es un button de ejemplo también activará la selección mediante el uso de la function de activación jquery

  <!DOCTYPE html> <html> <head> <style> button { margin:10px; } div { color:blue; font-weight:bold; } span { color:networking; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <select id = "slt"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <button id="btn">Button #2</button> <div><span>0</span> button #1 clicks.</div> <div><span>0</span> button #2 clicks.</div> <script> $("#slt").change(function () { update($("span:first")); }); $("button:last").click(function () { $("#slt").trigger('change'); update($("span:last")); }); function update(j) { var n = parseInt(j.text(), 10); j.text(n + 1); } </script> </body> </html> 

El evento .change jQuery detectará si el valor del campo de selección ha cambiado, entonces puede hacer una acción jQuery para mostrar su image.

Puedes usar .click pero se volverá desorderado. Mejor usar .change.

http://api.jquery.com/change/