Replicate effect from select to div

Question

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!

Answer 1

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.