Dependent dynamic drop downs

[Mitesh Ojha]

Hi All

I am working on a project where we need to populate the 3 drop downs on a single JSP page with database. We are using Oracle 9i. The first drop down is directly accessed from database. The second drop down is dependent on first and the third one on second.

The only solution which I could find is keeping each drop down in a separate JSP page. At onBlur action of a dropdown form is submitted and values get populated in next JSP.

Any other Solutions? Please attach some code for reference.

Thanks

[kapil patel]

Hi,

Option1: (One time database access - faster access). In this option, you do not need to go to database to retrieve relevant options in second List.

you can try one thing:

e.g. dropdown1, dropdown2, and dropdown3.

say you have 5 elements in dropdown1. Populate all relevant elements in dropdown2 List. Hence, for 1st element of dropwon1 there will be 1 list (multiple possible relevant values) in dropdown2. Similary, for dropdown2 corrosponding relevant elements in dropdown3 list.

Hence, values after populating all 3 lists will be like this:

Populate all 3 lists before your jsp loads using action class and store in session or request scope. Once, user selects, onchange event of menu using javascript change relevant dropdown list.

Option2:

Retreive relevant option from Database everytime. However, you do not need to display on another jsp page. you can forward back to same jsp page.

All the best

[kapil patel]

Hi,

Option1: (One time database access - faster access). In this option, you do not need to go to database to retrieve relevant options in second List.

you can try one thing:

e.g. dropdown1, dropdown2, and dropdown3.

say you have 5 elements in dropdown1. Populate all relevant elements in dropdown2 List. Hence, for 1st element of dropwon1 there will be 1 list (multiple possible relevant values) in dropdown2. Similary, for dropdown2 corrosponding relevant elements in dropdown3 list.

Hence, values after populating all 3 lists will be like this:

Dropdown1
Index values
0A
1B
2C
3D
4E

Dropdown2
Index values
1List(AA,AB,AC,AD,AE,AF,AG)
2List(BA,BB,BC,BD)
3List(CA,CB,CE)
4List

Dropdown3

Hence, if user selects 3rd element in dropdown1, using javascript you can dynamically load all elements of 3rd List in Dropdown2 (List(CA,CB,CE)). Similarly for dropdown3 selection.

Populate all 3 lists before your jsp loads using action class and store in session or request scope. Once, user selects, onchange event of menu using javascript change relevant dropdown list.

Option2:

Retreive relevant option from Database everytime. However, you do not need to display on another jsp page. you can forward back to same jsp page.

-----
All the best

[Mitesh Ojha]

Thanks Kapil.

But I have a big database. Actually I have different tables in database. On selection of one value other values are carried to the dropdown.

As my database size is too large, if I bring all the values to session object or request then it will become a big overhead. And most of my application contains similar pages, with 3-4 dropdowns. So its impossible to have values in session object.

Please help me out and send some piece of code for reference. As this area is very new to me. You can send me code at [e-mail]

Thanks

[Brent Sterling]

Loading all the available values on the page and manipulating them with JavaScript (which I think is kapil's "option 1" ) can be a good choice if you have a small set of values, but it sounds like this would not fit your cases.

Option2 is relatively straight forward to implement, but I don't really have and code that I could pass along. When the user selects a value in the parent list you need to submit the page setting some type of flag that you can use to bypass validation and to tell the "save" action to not save the record to the database but to forward back to the "display" action. Your display action would have the logic to retrieve the child lists from the database.

AJAX is another option that can provide the best aspects of both of these options, but I have yet to integrate AJAX features into a Struts application.

- Brent

[Merrill Higginson]

I've done this with AJAX, and I believe it's the best solution, particularly for a large set of options.

With the AJAX solution, you have the onchange event of the first dropdown make an AJAX call to the server to get the list of options for the second dropdown. You then use JavaScript to replace the options in the second dropdown with the list retrieved from the AJAX call. You follow a similar process with dropdowns 2 and 3.

My approach has been to integrate the DWR framework into my Struts applications. This saves me from most of the low-level coding involved in making AJAX calls work.

[Pras Tiwari]

Hi,
I am also facing same problem as of Mitesh . Now I am trying to use solution Number-1 (One time database access - faster access). & I have 2 dropdowns & I am storing all the values of both the dropdown boxes into request scope. Now my problem is How should I display the content into second Drop-down box using Javascript?
I am displaying two drop-down boxes. One for "Group Name" & Other for "Sub-Group Name". Inside My form bean which loads JSP page, I am using A array of value object "GrpSubGrpData[]" for holding all the values of Groups & their correponding Subgroups from database. Now initially when I am displaying all the values of "Groups" in "groups" dropdown box. & Displaying nothing initially in Sub-Group menu. Now when user will click on any one of group in groups drop-down box, all the corresponding sub-groups should be displayed in "Sub-Group" drop-down box.
Now please tell me how should I use javascript here for populating second dropdown box?
PLease help me.
I am trying this since last 2 days but not succeeded so far.
Thank you in advance.
Pras