Actualmente tengo este html:
<div class="limit"> <select onchange="location = this.value;"> <option value="http://example.net/mycategory?limit=24" selected="selected">24</option> <option value="http://example.net/mycategory?limit=48">48</option> <option value="http://example.net/mycategory?limit=72">72</option> <option value="http://example.net/mycategory?limit=96">96</option> <option value="http://example.net/mycategory?limit=120">120</option> <option value="http://example.net/mycategory?limit=9999">ALL</option> </select> </div>y en mi archivo .js se usa este:
if ($(".limit select").length) { $(".limit select").get(0).onchange = null; $(".limit select").change(function () { $("#filterpro_limit").val(gUV($(this).val(), "limit")); iF() }); }Lo que realmente quiero es mostrar las opciones de selección en una fila fuera del menú desplegable, por lo que mi idea fue eliminar el html anterior y usar este:
<div class="limit"> <div data-value="http://example.net/mycategory?limit=24">24</div> <div data-value="http://example.net/mycategory?limit=48">48</div> <div data-value="http://example.net/mycategory?limit=72">72</div> <div data-value="http://example.net/mycategory?limit=96">96</div> <div data-value="http://example.net/mycategory?limit=120">120</div> <div data-value="http://example.net/mycategory?limit=9999">ALL</div> </div>y en js para usar algo como esto:
if ($(".limit div").length) { $(".limit div").get(0).onclick = null; $(".limit div").click(function () { $("#filterpro_limit").val(gUV($(this).val(), "limit")); iF() }); }pero de alguna manera no puedo hacer que js funcione correctamente para tener un efecto similar. ¡Cualquier ayuda sería apreciada!
En su código actual hay algunos errores que deben corregirse:
En primer lugar, este selector $(".limit div") es incorrecto aquí porque obtendrá todos los div dentro de un elemento que tiene un limit de clase, por lo que debe cambiarlo a $("div.limit") para obtener el quería div.
Está usando $(this).val() en un elemento div que no tiene .val() porque no es una input o una select , necesita cambiarlo a $(this).attr("data-value") junto con el selector derecho.
Y hablando sobre el selector correcto para obtener las opciones div dentro de su .limit div, necesita usar $("div.limit div") y no hay necesidad de usar .get(0) con este selector.
Por lo tanto, su código debe cambiarse de la siguiente manera:
if ($("div.limit").length) { $("div.limit div").onclick = null; $("div.limit div").click(function() { $("#filterpro_limit").val(gUV($(this).attr("data-value"), "limit")); iF() }); }Nota:
Y tenga en cuenta que deberá cambiar el div .limit y su estilo secundario para que funcione como un menú desplegable.
Aunque construirlo usted mismo es gratificante, es posible que desee consultar https://select2.github.io/ . Eso es lo que quieres, pero luego mejor ;-). Aquí está el código:
<script type="text/javascript"> $(document).ready(function() { var $example = $(".js-example-programmatic").select2(); $(".js-programmatic-set-val").on("click", function () { $example.val("AL").trigger("change"); }); }); </script> <select class="js-example-programmatic"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select> <button class="js-programmatic-set-val btn btn-default">Set "Alabama"</button>Puede encontrar más información aquí: https://select2.github.io/examples.html#programmatic
Para obtener el valor dentro de div , use .text() en lugar de .val() Entonces su código debería ser
if ($(".limit div").length) { $(".limit div").get(0).onclick = null; $(".limit div").click(function () { $("#filterpro_limit").text(gUV($(this).data('value'), "limit")); }); } Suponiendo que iF() es una function que ha creado.