Drop down price filter

I created a product matrix/selector using Jquery and its working fine overall except for the price filter which is also working but kinda separate to the selector. Basically, at the moment when a feature is selected from the list it will present the product and if one wanted to filter based on the price they would select from the drop down. The problem is that the price filter is filtering regardless if that product has that feature or not, the price filter needs to only filter the products that are shown 开发者_StackOverflow社区by feature selector.

I need help in the script so that Price filter only filters the products that are displayed by the selectors and not show any product other product and if a price range is selected and that product is not displayed to return a message like "This product is not available based on the price range and feature selected"

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

The JQuery Script

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

Hope this is clear

I know this is old, but I figured another example on the internet couldn't hurt. I'm not professing this is the perfect solution, but it does work as the poster wanted.

First off, in your HTML : <option value="0" selected>-- Filter by Price Range --</option>

'selected' should be a class :

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

Second - We're going to add in a 'p' tag (in your products div, after your ul end tag) to hold the alert you wanted.

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

Next, in your JQuery - JScript:

$(document).ready(function() {

can be replaced with:

$(function() {

that's purely semantic though, not required. Next, add in a new var at the top called groups(or what ever) to store whether or not the user clicked on any of the selectors.

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

After that, I've added in two more classes (shown and current) to aid in the filtering process. current is added to the items that are grouped in your current selector, shown is added to current items that are not filtered out.

Replace:

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

With:

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

Replace:

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

With:

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

Replace:

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

With:

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

REMOVE the '$' from:

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

Result:

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

Create a new function:

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

Overhaul your $('pricefilter').change function:

$('.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() );
        }

And there you have a function filter for your selects. It'll even populate a list by your price filter selection alone if you don't click any selectors.