title: Filter SELECT options based on custom attribute
body: <p>I have a select list with options that each contain a custom attribute of "active" which is either equal to "T" or "F".  I'm trying to set up a javascript or jQuery function that will allow me to filter the options to only show those whose active attribute is equal to "T" or whose active attribute is equal to "F" based on which button they click.  Essentially having "Show Active" / "Show Inactive" buttons that will hide/show the appropriate select options.  </p>
  
  <p>Does anyone have any samples they could provide to get me started?  Thank you very much in advance!</p>
  
  <pre><code>function toggleUnitsSelector(active)
  {
      $('#unitsSelector option').each(function() {
          if($(this).attr("active")==active){
              $(this).show();
          } else {
              $(this).hide();
          }
      });
  }
  </code></pre>
  
  <p>Using the example provided by David Xu I came up with the function above.  It does indeed limit the options to only the ones marked as active="T" when I click my "show active" button, however it shows an empty select box when trying for inactive.  I can see in Google Chromes dev tools that the markup is being changed and when I select "show inactive" the ones that were marked with style="display:none;" switch to style="display:inline;" but they do not show up.  Any ideas?  Also, I'm calling this function toggleUnitsSelector('T') or toggleUnitsSelector('F')</p>