JavaScript, DHTML, jQuery: How to implement 'two way' master detail relationship within 3 html drop-downs (select boxes)

Question

We have a requirement that has had me skimming the web for quite sometime now. Here is the problem scenario. We have a web-page and the page here contains three drop-downs as shown in the picture below (Dummy fields - but the actual business data is also on the same lines)

Here, we have three drop downs with the data being populated dynamically based on the selections in the other two. Let me give you an example. Whenever a person clicks on a drop-down button - the values for the drop-down should be dynamically generated using the values selected in the other two drop-downs. See the below scenarios:

If someone has a pre selected "Honda" in the first drop-down and he clicks on the 'Milage" drop down - the 'Milage' drop-down should:
a. clear previous options (if any)
b. populate the options dynamically for all the milages valid for 'Honda' (as per the DB)
c. show the drop-down with the new options.

Also, the flow should work irrespective of any order of the drop-downs being selected.

This is where I am having issues - if I write the 'OnClick' handler for the drop down and use an AJAX call to get the values - the drop down values are populated but on IE - the drop-down collapses again. Also, in Firefox the options are populated ok - but the drop-down is kind of too animated (understandably so as I delete all the options and add the new ones).

Also, it would be great if the whole filteration thing can be handled on teh browser (as the AJAX calls take some time)

Here is the image if you can't see it in the original post above - 
http://www.imagechicken.com/uploads/1241831231099054800.jpg

Regards,
- Ashish

Answer 1

Your problem is that you are updating the drop down content when the user clicks on it. It is better to update the drop down when the related drop down is changed. For example:

$('#drop1').change(function(){
    $('#drop2').load(url, {option: $('#drop1').val()})
})

Answer 2

A polling solution or an onchange solution as described by @Nadia is likely your best bet here.