CODEWITHSUNDEEP
javascriptjqueryajax
Natalia
Natalia

Reputation: 1

multiple html select with ajax

How can I use a multiplo HTML select with 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);
            }
        });
    });

The first ajax is working, but when I try to call the second select box, nothing happens.

I need to loading the son1 select and then call an ajax to loading son2 select box, and after that, load son3 select box, and so on...

Any ideas??

Thanks!!!

Upvotes: 0

Views: 1789

Answers (1)

Lloyd Banks
Lloyd Banks

Reputation: 36648

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);
            }
        });
    });

Upvotes: 1

Related Questions