JavaScript, DHTML, jQuery: How to implement 'two way' master detail relationship within 3 html drop-downs (select boxes)
<p>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)</p>

<p>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:</p>

<p>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:<br>
a. clear previous options (if any)<br>
b. populate the options dynamically for all the milages valid for 'Honda' (as per the DB)<br>
c. show the drop-down with the new options.</p>

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

<p>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).</p>

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

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

<p>Regards,<br>
- Ashish</p>
