title: multiple html select with ajax
body: <p>How can I use a multiplo HTML select with ajax?</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;select name="son" id="son"&gt;
    &lt;option value="" &gt;son&lt;/option&gt;
  &lt;/select&gt; 
  
  &lt;select name="son1" id="son1"&gt;
    &lt;option value="" &gt;son1&lt;/option&gt;
  &lt;/select&gt; 
  
  &lt;select name="son2" id="son2"&gt;
    &lt;option value="" &gt;son2&lt;/option&gt;
  &lt;/select&gt; 
  
  &lt;select name="son3" id="son3"&gt;
    &lt;option value="" &gt;son3&lt;/option&gt;
  &lt;/select&gt; 
  
  &lt;select name="son4" id="son4"&gt;
    &lt;option value="" &gt;son4&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>   $("select[name='son']").change(function(){
  
           $('#son1').append('&lt;option value="" selected&gt;Loading&lt;/option&gt;');          
  
          $.ajax({
              url: "ajax.php",
              type: "post",
              data: 's='+ $('#son').find('option:selected').val(),
              success: function(data){
                  $("#son1").html(data);
              }
          });
      });  
  
      $("select[name='son1']").change(function(){
  
           $('#son2').append('&lt;option value="" selected&gt;Loading&lt;/option&gt;');          
  
          $.ajax({
              url: "ajax.php",
              type: "post",
              data: 's1='+ $('#son1').find('option:selected').val(),
              success: function(data){
                  $("#son2").html(data);
              }
          });
      });
  </code></pre>
  
  <p>The first ajax is working, but when I try to call the second select box, nothing happens.</p>
  
  <p>I need to loading the son1 select and then call an ajax to loading son2 select box, and after that, load son3 select box, and so on...</p>
  
  <p>Any ideas??</p>
  
  <p>Thanks!!!</p>