下拉价格过滤器

Question

我使用Jquery创建了一个产品矩阵/选择器，除了价格过滤器外，它的整体工作正常，但价格过滤器也有效，但与选择器分开。基本上，当从列表中选择一个特征时，它将显示产品，如果想要根据他们从下拉列表中选择的价格进行过滤。问题是价格过滤器是否过滤，无论该产品是否具有该功能，价格过滤器只需要过滤特征选择器显示的产品。

我需要脚本中的帮助，以便价格过滤器仅过滤选择器显示的产品，而不显示任何产品其他产品，如果选择了价格范围，并且未显示该产品则返回“此消息”根据价格范围和功能选择“

，产品不可用

HTML：

 <div id="pmcontainer">
  <p>Price Filter:
   <select name="pricefilter" class="pricefilter">
    <option value="0" selected>-- Filter by Price Range --</option>
    <option value="High">High End</option>
    <option value="Top">Top End</option>
    <option value="Mid">Mid Range</option>
    <option value="Low">Entry Level</option>
   </select>
  </p>
  <div id="application" class="selectors">
   <h4>Select by Application/Features</h4>
   <ul>
    <li>Outlets
     <ul>
      <li class="c2">2 Outlets</li>
      <li class="d145">7 Outlets</li>
      <li class="b8f b12r a12 ps10">8 Outlets</li>
     </ul> 
    </li>
    <li>Filtering 
     <ul>
      <li class="a12 ps10">Active</li>
      <li class="b8f b12r">Cascade</li>
      <li class="c2 d145">Passive</li>
      <li class="c2 d145 b8f b12r a12 ps10">Multi</li>
     </ul>
    </li>
   </ul>
  </div>
 </div>
 <div class="products">
     <h3>Products</h3>
  <ul>
   <li class="c2">Product C2</li>
   <li class="d145">Product D145</li>
   <li class="b8f">Product B8f</li>
   <li class="b12r">Product B12r</li>
   <li class="a12">Product A12</li>
   <li class="ps10">Product PS10</li>
  </ul>
 </div>

JQuery脚本

 <script type="text/javascript" charset="utf-8">
     $(document).ready(function() { 
         //PRODUCT SELECTOR
      $('.products li').hide();
      $('#pmcontainer li ul li').click(function(e){
          e.preventDefault();
          $('.products li').hide();
           var classes = $(this).attr('class').split(' ');
         $.each(classes, function() {
              $('.products li.' + this).fadeIn("slow");
          });
          $('#pmcontainer li ul li').removeClass("current");
          $(this).addClass("current");
      });
      //PRICE FILTER
      $.pricemap = {
          '0' : $([]),
          'High' : $('.products .ps10'),
          'Top' : $('.products .a12'),
          'Mid' : $('.products .b8f, .products .b12r'),
          'Low' : $('.products .c2, .products .d145')
        };
        $('.pricefilter').change(function() {
          // hide all
          $.each($.pricemap, function() { this.hide(); });
          // show current
          $.pricemap[$(this).val()].show();
        });
     });
 </script>

希望这很清楚

Answer 1

我知道这是旧的，但我认为互联网上的另一个例子不会受到伤害。 我并不认为这是一个完美的解决方案，但它确实可以起到海报的作用。

---

首先，在您的HTML中： <option value="0" 已选择 >-- Filter by Price Range --</option>

---

'已选中'应为班级：

<option value="0" class='selected'>-- Filter by Price Range --</option>

---

第二 - 我们将添加一个'p'标签（在您的产品div中，在您的ul结束标记之后）以保留您想要的警报。

<div class="products">
<h3>Products</h3>
    <ul>
       <li> ... </li>
    </ul>
<p id='alert' style='color:red'></p>
</div>

---

接下来，在您的JQuery中 - JScript：

$(document).ready(function() {

可以替换为：

$(function() {

这纯粹是语义的，不是必需的。 接下来，在顶部添加一个名为groups（或者是什么）的新var来存储用户是否点击了任何选择器。

var group = "";     //blank if no group is selected yet

之后，我又添加了两个类（显示和当前）以帮助过滤过程。 当前会添加到当前选择器中分组的项目中，显示会添加到未过滤掉的当前项目中。

---

<强>替换

$('#pmcontainer li ul li').click(function(e){
    e.preventDefault();
    $('.products li').hide();

。通过

$('#pmcontainer li ul li').click(function(e){
    e.preventDefault();
    $('.products li').hide().removeClass("shown current");;

---

<强>替换

$('.products li.' + this).fadeIn("slow");

。通过

$('.products li.' + this).fadeIn("slow");
$('.products li.' + this).addClass("shown current");

---

<强>替换

$(this).addClass("current");

。通过

$(this).addClass("current");
group = $(this).text();

---

从以下位置删除“$”：

'High' : $('.products .ps10'),
'Top' : $('.products .a12'),
'Mid' : $('.products .b8f, .products .b12r'),
'Low' : $('.products .c2, .products .d145')

<强>结果：

'High' : ('.products .ps10'),
'Top' : ('.products .a12'),
'Mid' : ('.products .b8f, .products .b12r'),
'Low' : ('.products .c2, .products .d145')

---

创建新功能：

function filterOut(selected) {
        $.each($.pricemap, function(i,v) {
                if( i !== selected )
                {
                    $(v).hide().removeClass('shown');
                }
        });
};

---

彻底检查$('pricefilter').change功能

$（'。pricefilter'）。change（function（）{             if（group ===“”）{                 filterOut（$（'select.pricefilter option：selected'）。val（））;

            $( $.pricemap[$(this).val()] ).show().addClass('shown');

        } else {

            // show current

            if( $( $.pricemap[$(this).val()] ).hasClass('current') ) {
                $( $.pricemap[$(this).val()] ).show().addClass('shown');
                $("p#alert").text("");
            } else if( $( $.pricemap[$(this).val()] ).hasClass('current') == false ) {
                $("p#alert").text("No price matches in this group");
            }
            // hide all
            filterOut( $('select.pricefilter option:selected').val() );
        }

---

你有一个选择的功能过滤器。如果您不点击任何选择器，它甚至会单独按价格过滤器选择填充列表。