multiple html select with ajax

Question

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!!!

Quick FYI, this.value will give you the selected value in your change event, no need to re-select the element and find the selected option. data: 's1=' + this.value would do. — tymeJV
– tymeJV, Commented Oct 3, 2013 at 1:30

Lloyd Banks · Accepted Answer · 2013-10-03 01:52:01Z

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

Collectives™ on Stack Overflow

multiple html select with ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related