javascript - 使用ajax选择多个html

Question

如何使用带有 ajax 的多重 HTML 选择？

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选择然后调用ajax来加载son2选择框，然后加载son3选择框，依此类推...

有任何想法吗？？

谢谢！！！

Answer 1

每当您使用 AJAX 调用操作 HTML 时，都应该使用 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);
            }
        });
    });