Question

I have a drop down menu with 3 values. each has an option id. I want to make an ajax request and update a div based on the response from that request.

I have sample code on jsbin in which I am trying to make ajax request to imdb. I don’t want to parse the response back from imdb but want someone to show me how to update a div based on the response back from imdb. This is just a sample as I am trying to implement something like this in my application…only difference is that instead of making callback to imdb I’ll be making callback to my applicaiton.

Please see the example

Answer 1

Something like:

$('select').change(function() {
    $('#yourdiv').load('to/your/page', {value: $(this).val()});
});

This will send a GET request (to/your/page?value=theSelectValue) whenever the value of the select element changes and load the response in the div with ID yourdiv.

Of course you have to adjust the selectors and the parameter name.

If you want to make a POST request, you can use the $.post() function with a callback:

$('select').change(function() {
    $.post('to/your/page', {value: $(this).val()}, function(data) {
        $('#yourdiv').html(data);
    });
});

Reference: .change(), .val(), .load(), $.post()