title: jQuery, Event when a select change
body: <p>I have 2 chained select : when a value is choose in the first one, the second select show some values that correspond to the first select.</p>
  
  <p>Example :</p>
  
  <pre><code>&lt;select id='first_select'&gt;
  &lt;option value='1' class='1'&gt; Half Life &lt;/option&gt;
  &lt;option value='2' class='2'&gt; Mario &lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id='second_select'&gt;
  &lt;option class='1'&gt; Gordon &lt;/option&gt;
  &lt;option class='1'&gt; Alexia &lt;/option&gt;
  &lt;option class='2'&gt; Peach &lt;/option&gt;
  &lt;option class='2'&gt; Luigi &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I have a filter input for the second select : when I type a letter/word, it show all values that have this letter/word.</p>
  
  <p>The filter input search in ALL VALUES : <em>For example, if I enter 'e' it will return 'Alexia' and 'Peach'</em> ! </p>
  
  <p>I would like that the filter input search only in the list of values available that correspond to the value selected in the first select : <em>If I select 'Mario' and I type 'e' I would like to have only the value 'Peach'</em> ! </p>
  
  <p>I have a jQuery function which work but only when I reload the page with a first value selected (with cookie): 
  (it create a new list/option with only these that are the same value/class)</p>
  
  <pre><code>$(document).ready( function() {
  
   $('#first_select').change(function(){
          var identif = jQuery('#first_select option:selected').attr('class');
          // alert(identif);
          var opts = $('#second_select option[class^='+identif +']').map(function(){
          // alert(this.value);
              return [[this.value, $(this).text()]];
          });
  
          $('#someinput').keyup(function(){
              var rxp = new RegExp($('#someinput ').val(), 'i');
              var optlist = $('#second_select').empty();
  
              opts.each(function(){
                  if (rxp.test(this[1])) {
                  optlist.append($('&lt;option /&gt;').attr('value', this[0]).text(this[1]));
                  }
              });    
          });
      });
  });
  </code></pre>
  
  <p>Problem is that didn't work without reload the page, as soos as I change the first value, my new list stay empty..</p>
  
  <p><strong>EDIT :</strong> </p>
  
  <p>When I put some alert, here what I have :
  When the page is load with a selected value : alert('1') then : alert('Gordon') and alert('Alexia'); but when I select a new value in the first select : alert('2') and that's all, whereas I must have alert('Peach') and alert('Luigi') </p>
  
  <p>Thanks for your help and advices,</p>