Question

I was just given a solution to a problem I have but I’m not really sure how to actually implement it.

$(function(){
    $.get('file1.php', function(data){
       $('#dropdown1').html( data ); 
    });

    // on change of dropdown1 populate dropdown2 with the respective data 
    $('#dropdown1').change(function(){
        $.get('file2.php',{ make: $(this).val() }, function(data){
            $(this).html( data ); 
        }); 
    }); 
}); 

Here is the question I asked
Ajax form, 2 drop downs with external source
I’m still unsure how to format file1 and file2.php as well as how to implement it into my form.
I really appreciate the advice/help . Thanks!

Answer 1

In other words you’d like an explanation of what this JavaScript does?

$.get('file1.php', function(data){
    $('#dropdown1').html( data );
}); 

The first AJAX call loads the output from file1.php into the element with id dropdown1 as HTML content – presumably that’s a select tag so you’d want a list of <option> elements.

$('#dropdown1').change(function(){
    $.get('file2.php',{ make: $(this).val() }, function(data){
        $('#dropdown2').html( data );
    });
});

This second one calls file2.php?make=abc where abc is the value selected in dropdown1 and loads the content of that into dropdown2 again as HTML. So presumably again you’d want to output a list of <option> elements.

However there’s neater ways to do this, e.g. return JSON lists of data and then assemble them into options on the client side. In particular you can then store last selected values in case the user switches between lists, switch both dropdowns to ‘loading’ or similar whilst waiting for the AJAX calls to complete, etc.