File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Dynamic select boxes Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Dynamic select boxes" Watch "Dynamic select boxes" New topic
Author

Dynamic select boxes

Joe Guzzardo
Ranch Hand

Joined: Mar 14, 2000
Posts: 57
I have a select box that is populated with data from the server when the page is loaded (e.g. a categories list). If the user selects an element from this box, another box is loaded with data from the server (e.g. a products list). Upon making a selection from the second box a group of text boxes are populated (e.g data specific to the given product). These text boxes may be modified and submitted to the server to update a database. Upon completion of this sequence the select boxes are reloaded from the server to preserve their contents. (I am trying to do this without using frames.) I would like to work around this reload if possible since the data was already sent to the client. Is there any way to do this in Javascript or with any other facility?
bill bozeman
Ranch Hand

Joined: Jun 30, 2000
Posts: 1070
I am really not sure what you are trying to do. Can you walk through a detailed example step by step? Maybe that will help me figure out what you want so I can try to help.
Bill
Joe Guzzardo
Ranch Hand

Joined: Mar 14, 2000
Posts: 57
My HTML page will have 2 select boxes and 1 form for detail information. The idea is lets say the first select box displays a list of states. When the user selects a given state (say Alaska) the second select box will be populated with a list of cities that are in Alaska. When the user selects a given city, the form will be populated with details about that city. When refreshing the HTML page, I must go back to the server every time to repopulate the list boxes which is redundant since the boxes have already been populated in a prior request to the server. I was wondering if there is any way with JavaScript or any other facility to preserve the contents of the lists boxes on the client side. I hope this makes my dilemma a little clearer. TIA, Joe
Anonymous
Ranch Hand

Joined: Nov 22, 2008
Posts: 18944
The way to do this is with arrays. When the user selects their option in the first list box (Alaska in this case) you do your server-side processing to get a resultset with all of the cities in it. Then you use that result set to generate a JavaScript array containing all of the values that you wish to add to your listbox. Then it is a simple matter of looping through the array and adding each element to the listbox using

Check out this url for a client-side example. They leave the server-side processing up to you to figure out, but it should get you started.
bill bozeman
Ranch Hand

Joined: Jun 30, 2000
Posts: 1070
Ok, I got you now. You are having them select the state (from your example) and then you go back to the server to grab all the cities from the selected state to fill the next text box. Then they select the city, then you go back to the server to fill something else out later in the form based on what city they selected. Is that about right?
If that is the case, then I have seen it where this is done with a wizard type approach. Step one, select your state, step two, select your city, etc...
I have also seen this done in frames. You can do it with frames where you don't have any borders or anything like that so you give the illusion that you are not in frames, but you really are. Then when the select the state in frame one, frame two changes to the appropriate cities, etc...
And I have seen this done with Applets so that you can make it dynamic and not have to make as many calls back and forth from the server.
If you don't want to use frames, and you don't want the wizard approach so that you are only dealing with one form, then you will need to refresh those text boxes again with another call to the database or where ever else you got the info. Once you send it to the client, the info is gone and you will have to get it back if you want to show it again.
You can cookie things and use session variables and do URL encoding so this isn't always the case, but you wouldn't want to do that with a list of all states and cites because it is way to large.
Hope that helps.
Bill
bill bozeman
Ranch Hand

Joined: Jun 30, 2000
Posts: 1070
Hey Bodie, I thought about that also, but wouldn't it seem redundant. If you have to go back to the server to get the list of cities, why put them into an array in Javascript at all. If you have server-side processing, instead of looping through the recordset and placing them into the array, couldn't you just as easily have the loop generate the list box.
Then you can use javascript to get at those items if needed. It seems like that would save some overhead since you don't have a variable holding all of that data.
Now if the record set to begin with is small enough, then I would say place them into arrays, so after someone selects what state they want, you can populate the cities without even going back to the sever, but I would only do that if the recordset is small because you don't want to send back to the client a list of 50 states and all the cites in those 50 states. Page would be HUGE.
Bill

[This message has been edited by bill bozeman (edited February 28, 2001).]
Connie Boyd
Ranch Hand

Joined: Feb 22, 2001
Posts: 73
Hey Joe! One question ... why are you refreshing the HTML page if you don't want to start over? From your first post, it sounds like:
1) User selects item in Select Box 1
2) User selects generated item in Select Box 2
3) User modifies text box items generated from Select Box 2
4) On submit, server returns refreshed page with no options created/selected.
Is this correct? Are you trying to prevent #4? Could you print a confirmation page, rather than returning them to the beginning?
Am I way off base? I'm just trying to understand how/why the page gets refreshed in the first place.
Anonymous
Ranch Hand

Joined: Nov 22, 2008
Posts: 18944
Good call, Bill. It would be redundant to use an array when you already have a Resultset.
 
Consider Paul's rocket mass heater.
 
subject: Dynamic select boxes