Problem with removing child

Question

I have two drop down forms. When the first is "changed" the second is populated with some data via ajax.
It's work but the value of the second drop down is not cleared on every request (I'm using $('#second_drop_down').children().remove();)

Here is sample code

$('#first_drop_down').live('change', function() {
   var x = "some ajax data recived via ajax";
   $('#second_drop_down').children().remove();
   $('#second_drop_down').append(f);
});

Answer 1

Here you have a code that works, but it is practically like yours (you have a mistake in your example, 2 differente variables "x" and "f"):

http://www.jsfiddle.net/dactivo/8jfHG/

    var timeChanged=1;
    $("#first_drop_down").change(function()
                       {

                $("#second_drop_down").children().remove();
               $("#second_drop_down").append("<option value=\"volvo\">Volvo"+
 timeChanged+
    "</option><option value=\"saab\">Saab"+ timeChanged+
    "</option><option value=\"mercedes\">Mercedes"+ timeChanged+"</option>");
                                  timeChanged++;
                           });

Probably the code you received by ajax is malformed (I suppose).

Answer 2

Do you make a synchronous Ajax call? If not, you must put the code that changes the second drop down in the callback function, otherwise you will work on data that was not yet received. Assuming you use jQuery:

$.get( 'http://www.example.com', {first:$('#first_drop_down').val()}, 
  function(data) {
    $('#second_drop_down').children().remove();
    $('#second_drop_down').append(data);
});