Drop down price filter

Question

Hello,

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

Thanks & Regards Said