Question

我正试图找出一种方法，使用选择下拉列表显示从/到数字的div。

我已经创建了这个jsfiddle来解释这个问题：http://jsfiddle.net/chd836b8/2/

基本上，每个div都有一个data-price=""，它们中有不同的值，正如你在jsfiddle中看到的那样！

我需要从dropdown list中选择价格范围并相应地显示div。到目前为止，我还没有找到办法做到这一点。

有人可以就此问题提出建议吗？

提前致谢。

Answer 1

您可以通过将data属性添加到确定该选择的最低/最高价格的option元素来实现此目的：

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

接下来你需要执行

$(".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>

jQuery：显示数字范围从/到的div？

3 个答案: