Replizieren Wirkung von ausgewählten DIV

Question

Zur Zeit habe ich diese 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> 

und in meinem Js Datei, die es verwendet wird, dies:

if ($(".limit select").length) { 
    $(".limit select").get(0).onchange = null; 
    $(".limit select").change(function() { 
     $("#filterpro_limit").val(gUV($(this).val(), "limit")); 
     iF() 
    }); 
} 

Was ich will, ist eigentlich die Optionen zu zeigen, die Auswahl in einer Zeile außerhalb der Dropdown-Liste war so meine Idee, die über hTML und verwenden diese ein entfernt:

<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> 

und in js somet zu verwenden Hing wie folgt aus:

if ($(".limit div").length) { 
     $(".limit div").get(0).onclick = null; 
     $(".limit div").click(function() { 
      $("#filterpro_limit").val(gUV($(this).val(), "limit")); 
      iF() 
     }); 
    } 

aber irgendwie kann ich die js machen nicht richtig zu arbeiten, um die gleiche Wirkung haben. Jede Hilfe wäre willkommen!

Answer 1

In Ihrem aktuellen Code gibt es nur wenige Fehler, die corercted werden sollten:

• Erste dieser alle Wähler $(".limit div") hier falsch ist, weil es alle div s innerhalb eines Elements erhalten wird, die Klasse hat limit so müssen Sie um es zu $("div.limit") zu ändern, um das gesuchte div zu erhalten.

• Du $(this).val() auf einem div-Element, das nicht .val() hat, weil es nicht ein input oder ein select ist, müssen Sie es $(this).attr("data-value") zusammen mit dem rechten Wähler ändern.

• Und wo sie gerade über die rechten Wähler die div Optionen in Ihrem .limit div Sie keine Notwendigkeit, mit diesem selctor verwendet .get(0)$("div.limit div") und es verwenden müssen, erhalten.

So Ihr Code müssen wie folgt geändert werden:

if ($("div.limit").length) { 
    $("div.limit div").onclick = null; 
    $("div.limit div").click(function() { 
     $("#filterpro_limit").val(gUV($(this).attr("data-value"), "limit")); 
     iF() 
    }); 
} 

Hinweis:

Und beachten Sie, dass Sie die .limit div und seine Kinder Stil müssen sich ändern, es zu erhalten Arbeit als Dropdown.

Answer 2

Obwohl es sich lohnt, diese selbst zu bauen, sollten Sie sich die ansehen. Das ist was du willst, aber dann schöner ;-). Hier ist der 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> 

Weitere Informationen finden Sie hier: https://select2.github.io/examples.html#programmatic

Answer 3

Um den Wert innerhalb div Verwendung zu erhalten .text() statt .val() So sollten Sie Code sein

if ($(".limit div").length) { 
     $(".limit div").get(0).onclick = null; 
     $(".limit div").click(function() { 
      $("#filterpro_limit").text(gUV($(this).data('value'), "limit")); 
     }); 
    } 

Unter der Annahme, dass iF() ist ein function, den Sie erstellt haben.