Currently i have this 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>
and in my .js file it is used this one:
if ($(".limit select").length) {
$(".limit select").get(0).onchange = null;
$(".limit select").change(function () {
$("#filterpro_limit").val(gUV($(this).val(), "limit"));
iF()
});
}
What i want actually is to show the options of the select in a row outside of the dropdown, so my idea was do remove the above html and use this one:
<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>
and in js to use something like this:
if ($(".limit div").length) {
$(".limit div").get(0).onclick = null;
$(".limit div").click(function () {
$("#filterpro_limit").val(gUV($(this).val(), "limit"));
iF()
});
}
but somehow i cannot make the js to work correctly to have the similar effect. Any help would be appreciated!
In your current code there are few mistakes that should be corercted:
First of all this selector $(".limit div") is wrong here because it will get all divs inside an element that has class limit so you need to change it to $("div.limit") in order to get the wanted div.
You are using $(this).val() on a div element which doesn't have .val() because it's not an input or a select, you need to change it to $(this).attr("data-value") along with the right selector.
And speaking about the right selector to get the div options inside your .limit div you need to use $("div.limit div") and there's no need to use .get(0) with this selctor.
So your code need to be changed as follow:
if ($("div.limit").length) {
$("div.limit div").onclick = null;
$("div.limit div").click(function() {
$("#filterpro_limit").val(gUV($(this).attr("data-value"), "limit"));
iF()
});
}
Note:
And note that you will need to change the .limit div and its children style to get it work as a dropdown.
Although building this yourself is rewarding, you might want to look at https://select2.github.io/. That is what you want, but then nicer ;-). Here is the code:
<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>
More info can be found here: https://select2.github.io/examples.html#programmatic
To get the value inside div use .text() instead of .val()
So you code should be
if ($(".limit div").length) {
$(".limit div").get(0).onclick = null;
$(".limit div").click(function () {
$("#filterpro_limit").text(gUV($(this).data('value'), "limit"));
});
}
Assuming that iF() is a function you have created.