multiple html select with ajax

Question

Как использовать многопользовательский HTML-выбор с ajax?

HTML

<select name="son" id="son"> 
    <option value="" >son</option> 
</select> 

<select name="son1" id="son1"> 
    <option value="" >son1</option> 
</select> 

<select name="son2" id="son2"> 
    <option value="" >son2</option> 
</select> 

<select name="son3" id="son3"> 
    <option value="" >son3</option> 
</select> 

<select name="son4" id="son4"> 
    <option value="" >son4</option> 
</select> 

JS:

$("select[name='son']").change(function(){ 

     $('#son1').append('<option value="" selected>Loading</option>');   

     $.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('<option value="" selected>Loading</option>');   

     $.ajax({ 
      url: "ajax.php", 
      type: "post", 
      data: 's1='+ $('#son1').find('option:selected').val(), 
      success: function(data){ 
       $("#son2").html(data); 
      } 
     }); 
    }); 

Первый Ajax работает, но когда я пытаюсь вызвать второй блок выбора, ничего не происходит.

мне нужно погрузка son1 выбрать, а затем вызвать Аякса загрузки son2 выберите поле, и после этого, загрузить son3 выбрать окно, и так далее ...

Любые идеи ??

Спасибо !!!

Answer 1

В любое время, когда вы манипулируете HTML с помощью вызова AJAX, вы должны использовать событие jQuery «on». Попробуйте это

$("body").on("change", "select[name='son']", function(){ 

     $('#son1').append('<option value="" selected>Loading</option>'); 

     $.ajax({ 
      url: "ajax.php", 
      type: "post", 
      data: 's='+ $('#son').find('option:selected').val(), 
      success: function(data){ 
       $("#son1").html(data); 
      } 
     }); 
    }); 

    $("body").on("change", "select[name='son1']", function(){ 

     $('#son2').append('<option value="" selected>Loading</option>'); 

     $.ajax({ 
      url: "ajax.php", 
      type: "post", 
      data: 's1='+ $('#son1').find('option:selected').val(), 
      success: function(data){ 
       $("#son2").html(data); 
      } 
     }); 
    });