使用 AJAX 选择多个 html

multiple html select with ajax

本文关键字：html 选择 AJAX 使用      更新时间：2023-09-26

如何在 ajax 中使用 multiplo 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 选择框，依此类推......

任何想法？？

谢谢！！！

每当使用

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);
            }
        });
    });
相关文章：