title: jquery show options with a certain class, hide others
body: <p>I have two select lists. Both are populated using php and mysql. When the user clicks on an organization in the first list, only events for that organization should show in the events list. The organization id is the value of the options in the organization list and the class for the options in the event list.</p>
  
  <p>When I choose organization 3, two events (A and B) should show in the event list. Instead, all the event options disappear! Something must be wrong with my selector for the second menu but I'm too new to jQuery to figure it out!</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function() {
      $("#pick_org").change(function() {
          var org = $(this).val();
          $("#pick_event option").hide();
          $('#pick_event option .org-'+org).show();
      });
  });
  </code></pre>
  
  <p><strong>HTML Form</strong></p>
  
  <pre><code>&lt;form action="post" method=""&gt;
  &lt;label for="pick_org"&gt;1. Pick Organization&lt;/label&gt;    
  &lt;select name="pick_org" id="pick_org"&gt;
      &lt;option value="1"&gt;Org 1&lt;/option&gt;
      &lt;option value="2"&gt;Org 2&lt;/option&gt;
      &lt;option value="3"&gt;Org 3&lt;/option&gt;
      &lt;option value="4"&gt;Org 4&lt;/option&gt;
      &lt;option value="5"&gt;Org 5&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;label for="pick_event"&gt;2. Select Event&lt;/label&gt;
  &lt;select name="pick_event" id="pick_event"&gt;
      &lt;option value="A" class="org-3"&gt;Event A&lt;/option&gt;
      &lt;option value="B" class="org-3"&gt;Event B&lt;/option&gt;
      &lt;option value="C" class="org-5"&gt;Event C&lt;/option&gt;
      &lt;option value="D" class="org-1"&gt;Event D&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>CSS</strong>
      #pick_org option, #pick_event option{display:block;}</p>
  
  <p>I'm loading both lists using php because my target audience doesn't always have JavaScript turned on. ;-(</p>