jQuery：顯示數字範圍從/到？

Question

我想找出一種方法來顯示使用選擇下拉列表範圍從/到數字的div。

我創造了這個的jsfiddle來解釋這個問題：http://jsfiddle.net/chd836b8/2/

基本上，每個div有一個data-price=""，他們對他們有不同的值，你可以在看的jsfiddle！

我需要選擇dropdown list的價格響應並相應地顯示div。到目前爲止，我還沒有找到辦法做到這一點。

請問有人能就這個問題提出建議嗎？

在此先感謝。

Answer 1

你可以做到這一點：

<select id="priceRange" style="width:101px; height:49px; background:#eeeeee; border-radius:8px;"> 
    <option data-price-min="0" data-price-max="49">Under 50</option> 
    <option data-price-min="50" data-price-max="100">50 - 100</option> 
    <option data-price-min="100" data-price-max="250">100 - 250</option> 
    <option data-price-min="250" data-price-max="500">250 - 500</option> 
    <option data-price-min="500" data-price-max="1000">500 - 1000</option> 
    <option data-price-min="1000" data-price-max="9999">Over 1000</option> 
</select> 

然後在JS ，您可以在select更改時閱讀這些屬性，並找到相關的.drag元素，其data-price屬於這些範圍之間：

$('select').on('change', function() { 
    var $option = $(this).find('option:selected'); 
    var min = $option.data('price-min'); 
    var max = $option.data('price-max'); 
    $('.drag').hide().filter(function() { 
     var price = $(this).data('price'); 
     return price >= min && price <= max; 
    }).show(); 
}); 

Working example

Answer 2

首先，你需要添加data-min和data-max到您的選擇：

<select id="priceRange"> 
<option data-min="0" data-max="49">Under 50</option> 
<option data-min="50" data-max="100">50 - 100</option> 
<option data-min="100" data-max="250">100 - 250</option> 
<option data-min="250" data-max="500">250 - 500</option> 
<option data-min="500" data-max="1000">500 - 1000</option> 
<option data-max="1000">Over 1000</option> 

這將允許你限制稍後可見的div。

接下來，你需要通過添加data屬性來決定的最小/最大代價的是選擇option元素進行

$(".drag").each(function(){ 
    var price = $(this).data('price'); 
    //and then check if it fits between min and max to show it 
}); 

Answer 3

嘗試增加data-*屬性option元素作爲最小的陣列，最大值，或範圍來過濾.drag元件

$(function() { 
 
    $("select").on("change", function() { 
 
    var range = $(this.selectedOptions[0]).data("range") 
 
    $(".drag").hide().filter(function(i, el) { 
 
     var n = $(this).data().price; 
 
     return !!range[1] ? n >= range[0] && n <= range[1] : n >= range[0] 
 
    }).show(); 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="priceRange" style="width:101px; height:49px; background:#eeeeee; border-radius:8px;"> 
 
    <option data-range='[0, 50]'>Under 50</option> 
 
    <option data-range='[50, 100]'>50 - 100</option> 
 
    <option data-range='[100, 250]'>100 - 250</option> 
 
    <option data-range='[250, 500]'>250 - 500</option> 
 
    <option data-range='[500, 1000]'>500 - 1000</option> 
 
    <option data-range='[1000]'>Over 1000</option> 
 
</select> 
 

 

 

 
<div data-price="2" class="drag">2</div> 
 
<div data-price="2" class="drag">2</div> 
 
<div data-price="4" class="drag">4</div> 
 
<div data-price="7" class="drag">7</div> 
 
<div data-price="20" class="drag">20</div> 
 
<div data-price="40" class="drag">40</div> 
 
<div data-price="100" class="drag">100</div> 
 
<div data-price="200" class="drag">200</div> 
 
<div data-price="200" class="drag">200</div> 
 
<div data-price="500" class="drag">500</div> 
 
<div data-price="1000" class="drag">1000</div> 
 
<div data-price="1100" class="drag">1100</div> 
 
<div data-price="2000" class="drag">2000</div> 
 
<div data-price="2000" class="drag">2000</div> 
 
<div data-price="3000" class="drag">3000</div>