0

ajaxでmultiplo HTML selectを使用するにはどうすればよいですか?

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 は機能していますが、2 番目の選択ボックスを呼び出そうとしても何も起こりません。

son1の選択をロードしてから、ajaxを呼び出してson2の選択ボックスをロードし、その後、son3の選択ボックスをロードする必要があります...

何か案は？？

ありがとう！！！

4

1 に答える 1

1

Anytime you're manipulating HTML with an AJAX call, you should use the jQuery "on" event. Try this

  $("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);
            }
        });
    });
于 2013-10-03T01:52:01.843 に答える