Replicating effect from select to div
I currently 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 my .js file uses this one:
if ($(".limit select").length) {
$(".limit select").get(0).onchange = null;
$(".limit select").change(function () {
$("#filterpro_limit").val(gUV($(this).val(), "limit"));
iF()
});
}
I actually want to show the select options on the row outside of the dropdown, so my idea was to remove the above html and use this:
<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 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 can't get js to work correctly to have a similar effect. Any help would be appreciated!
source to share
There are several errors in your current code that should be fixed:
-
First of all this selector
$(".limit div")
is wrong here because it will get everythingdiv
inside an element with a classlimit
, so you need to change it to$("div.limit")
to get the cases you want . -
You are using
$(this).val()
on a div element that does not have.val()
because it is notinput
orselect
, you need to change it to$(this).attr("data-value")
along with the right selector. -
And speaking of the correct selector to get the div options inside your
.limit
div, you need to use$("div.limit div")
, and there is no need to use.get(0)
selctor with that.
So, your code needs to be changed like this:
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:
Note that you will need to change the style of the .limit
div and its child style to make it work like a dropdown.
source to share
While creating this is helpful in itself, you can take a look at https://select2.github.io/ . This is what you want, but then better ;-). 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 information can be found here: https://select2.github.io/examples.html#programmatic
source to share
To get the value inside div
, use .text()
instead of .val()
Thus, the 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 which iF()
is the function
one you created.
source to share