Have Geek Brain

JavaScript, DHTML, jQuery: how to implement a relationship between two main relationships within three html dropdowns (select fields)

We have a requirement that made me hide the network for quite some time now. Here is the scenario of the problem. We have a web page and the page here contains three dropdowns as shown in the image below (Dummy fields - but the actual business data is on the same line as well)

Here we have three dropdown lists, the data of which is filled dynamically based on the selection in the other two. Let me give you an example. Whenever a person clicks on the dropdown - the values ​​for the dropdown should be dynamically generated using the values ​​selected in the other two dropdowns. See below scenarios:

If someone has a pre-selected Honda in the first dropdown and clicks on Mercy, the Milage dropdown should: a. clear previous parameters (if any)
b. fill in parameters dynamically for all worlds valid for "Honda" (according to DB)
c. show a dropdown menu with new options.

Also, the stream should work independently of any order of the dropdowns.

This is where the problems arise - if I write an OnClick handler for the dropdown and use an AJAX call to get the values ​​- the values ​​of the dropdown are populated, but in IE - the dropdown is reset again. Also, in Firefox, the options populate fine - but the dropdown is too animated (understandable since I'm deleting all options and adding new ones).

Also, it would be great if the whole filtering function could be handled in the browser (since AJAX calls take a while)

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

Best regards,
- Ashish

0


a source to share


2 answers


Your problem is that you are updating the dropdown content when the user clicks on it. Better to update the dropdown if the corresponding reduced size is resized. For instance:



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


a source


The poll solution or the onchange solution as described by @Nadia is most likely your best bet here.



0


a source






More articles:


All Articles