Javascript 使用ajax选择多个html

如何将multiplo HTML select与ajax结合使用

HTML

儿子
儿子1
儿子2
son3
son4

JS:

$（“选择[name='son']）。更改（函数（）{
$（'#son1'）。追加（'Loading'）；
$.ajax({
url:“ajax.php”，
类型：“post”，
数据：“s=”+$（“#son”）.find（'option:selected'）.val（），
成功：功能（数据）{
$（“#son1”）.html（数据）；
}
});
});  
$（“选择[name='son1']”）。更改（函数（）{
$（'#son2'）。追加（'Loading'）；
$.ajax({
url:“ajax.php”，
类型：“post”，
数据：“s1=”+$（“#son1”）.find（'option:selected'）.val（），
成功：功能（数据）{
$（“#son2”）.html（数据）；
}
});
});

第一个ajax正在工作，但是当我尝试调用第二个选择框时，什么也没有发生

我需要加载son1选择，然后调用ajax来加载son2选择框，然后加载son3选择框，依此类推

有什么想法吗

---

谢谢

无论何时使用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);
            }
        });
    });

$（“body”）。在（“更改”、“选择[name='son']”上，函数（）{
$（'#son1'）。追加（'Loading'）；
$.ajax({
url:“ajax.php”，
类型：“post”，
数据：“s=”+$（“#son”）.find（'option:selected'）.val（），
成功：功能（数据）{
$（“#son1”）.html（数据）；
}
});
});
$（“body”）。在（“更改”、“选择[name='son1']”上，函数（）{
$（'#son2'）。追加（'Loading'）；
$.ajax({
url:“ajax.php”，
类型：“post”，
数据：“s1=”+$（“#son1”）.find（'option:selected'）.val（），
成功：功能（数据）{
$（“#son2”）.html（数据）；
}
});
});

Quick FYI，

此.value

将在更改事件中为您提供所选值，无需重新选择元素并查找所选选项<代码>数据：“s1=”+此值即可。

   $("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);
            }
        });
    });

  $("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);
            }
        });
    });