RE: Hierarchical Lists
I agree. This behaviour looks very suited to a dhtml/js solution. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: 17 March 2004 19:54 To: [EMAIL PROTECTED] Subject: RE: Hierarchical Lists Short of a reload, I believe only a JavaScript/DHTML function can provide this behavior. -Original Message- From: Randy Dillon [mailto:[EMAIL PROTECTED] Sent: Wednesday, March 17, 2004 2:48 PM To: Struts Users Mailing List Subject: Hierarchical Lists Say I have 2 (or more) lists that are part of a hierarchy, such that the first list is a category (say Food Groups) and the second list contains children of each of the first list's items (for this example, let's say Food Types). How do I get the second list to be filtered based on the selection in the first list? I know this can be done by reloading the page each time the selection is changed in the first list, but is there a way to do this without the page reload? To add more detail to the example: Food Groups Food Types --- -- Meat&Dairy Beef Chicken Milk Eggs Fruit&Veg Melons Apples Oranges Lettuce . . . . . . If Meat&Dairy is selected in the Food Groups list, can the second Food Types list be filtered to only the Meat&Dairy food types without a page reload? - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] *** This e-mail and its attachments are confidential and are intended for the above named recipient only. If this has come to you in error, please notify the sender immediately and delete this e-mail from your system. You must take no action based on this, nor must you copy or disclose it or any part of its contents to any person or organisation. Statements and opinions contained in this email may not necessarily represent those of Littlewoods. Please note that e-mail communications may be monitored. The registered office of Littlewoods Limited and its subsidiaries is 100 Old Hall Street, Liverpool, L70 1AB. Registered number of Littlewoods Limited is 262152. - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
RE: Hierarchical Lists
Populating the select objects via javascript isn't too scary - just make sure you do a thorough cross-browser test (which you should be doing anyway) Javascript: var theForm = document.forms['formName'] gets you the form object. theForm.mySelectBox - gets you the select box object theForm.mySelectBox.selectedIndex - 0 -based index of currently selected option theForm.mySelectBox.options = array of option objects. You can create new option objects with var newOption = new Option(text, value, defaultSelected, selected) where: text = text to display value = value returned on submission if selected defaultSelected = Boolean - if true this option is selected by default when first created selected - Boolean current selected property. Get data into javascript by using server side code to populate a series of javascript arrays. A good example can be found here: http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20888121. html -Original Message- From: Freddy Villalba Arias [mailto:[EMAIL PROTECTED] Sent: 18 March 2004 08:25 To: Struts Users Mailing List Subject: RE: Hierarchical Lists I'm envolved in a Project that will be basically lots of this stuff. This CSS approach seems nice one, but it doesn't look like feasible if the hierarchical structure is too complex and / or it's just too big (then we would have an awfully heavy page). Everytime I face the same problem, I come to the very same conclusion (100% server-side solution). I admit it: I haven't had the guts to take the risk with the "client-side" one. Anybody: something to share regarding these issues? Has somebody gone all-the-way with some scripting solution for a complex hierarchy? Cheers, Freddy. -Mensaje original- De: Scherger, Derek [mailto:[EMAIL PROTECTED] Enviado el: miércoles, 17 de marzo de 2004 23:16 Para: 'Struts Users Mailing List' Asunto: RE: Hierarchical Lists You might use something like ... ... ... ... ... Then in the onchange event of the parent-list you can call a javascript function that would do list = document.getElementById(child) list.style.display=""; // show list list.style.display="none"; // hide list as required. You'll have to set the proper list to be visible when the page first loads and you'll have to keep track of which list is currently visible (in javascript) so that you can toggle it off and the next one on. This type of thing seems to be working pretty well for me at the moment, although I haven't done exactly this. Let mw know how it works out. Cheers, Derek -Original Message- From: Randy Dillon [mailto:[EMAIL PROTECTED] Sent: Wednesday, March 17, 2004 2:46 PM To: Struts Users Mailing List Subject: RE: Hierarchical Lists Derek, That's an interesting concept. My CSS skills are pretty basic though. How could you use CSS to do it? Would it work if the first list was multi-select with many different possible combinations? :-> -Original Message- :-> From: Scherger, Derek [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 3:32 PM :-> To: 'Struts Users Mailing List' :-> Subject: RE: Hierarchical Lists :-> :-> :-> I've though of (but not done) the possibility of using css :-> to hide and show :-> different versions of the second select list rather than :-> adding/removing :-> elements with javascript. Not sure which would be a better :-> way to go as they :-> both will require some scripting. The css hide/show :-> version's script is :-> pertty trivial though. :-> :-> Cheers, :-> Derek :-> :-> -Original Message- :-> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 12:54 PM :-> To: [EMAIL PROTECTED] :-> Subject: RE: Hierarchical Lists :-> :-> :-> Short of a reload, I believe only a JavaScript/DHTML :-> function can provide :-> this behavior. :-> :-> :-> -Original Message- :-> From: Randy Dillon [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 2:48 PM :-> To: Struts Users Mailing List :-> Subject: Hierarchical Lists :-> :-> :-> Say I have 2 (or more) lists that are part of a hierarchy, :-> such that the :-> first list is a category (say Food Groups) and the second :-> list contains :-> children of each of the first list's items (for this :-> example, let's say Food :-> Types). :-> :-> How do I get the second list to be filtered based on the :-> selection in the :-> first list? I know this can be done by reloading the page :-> each time the :-> selection is changed in the first list, but is there a way :-> to do this :-> without the page reload? :-> :-> To add more detail to the example: :-> :-> Food Groups
RE: Hierarchical Lists
I'm envolved in a Project that will be basically lots of this stuff. This CSS approach seems nice one, but it doesn't look like feasible if the hierarchical structure is too complex and / or it's just too big (then we would have an awfully heavy page). Everytime I face the same problem, I come to the very same conclusion (100% server-side solution). I admit it: I haven't had the guts to take the risk with the "client-side" one. Anybody: something to share regarding these issues? Has somebody gone all-the-way with some scripting solution for a complex hierarchy? Cheers, Freddy. -Mensaje original- De: Scherger, Derek [mailto:[EMAIL PROTECTED] Enviado el: miércoles, 17 de marzo de 2004 23:16 Para: 'Struts Users Mailing List' Asunto: RE: Hierarchical Lists You might use something like ... ... ... ... ... Then in the onchange event of the parent-list you can call a javascript function that would do list = document.getElementById(child) list.style.display=""; // show list list.style.display="none"; // hide list as required. You'll have to set the proper list to be visible when the page first loads and you'll have to keep track of which list is currently visible (in javascript) so that you can toggle it off and the next one on. This type of thing seems to be working pretty well for me at the moment, although I haven't done exactly this. Let mw know how it works out. Cheers, Derek -Original Message- From: Randy Dillon [mailto:[EMAIL PROTECTED] Sent: Wednesday, March 17, 2004 2:46 PM To: Struts Users Mailing List Subject: RE: Hierarchical Lists Derek, That's an interesting concept. My CSS skills are pretty basic though. How could you use CSS to do it? Would it work if the first list was multi-select with many different possible combinations? :-> -Original Message- :-> From: Scherger, Derek [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 3:32 PM :-> To: 'Struts Users Mailing List' :-> Subject: RE: Hierarchical Lists :-> :-> :-> I've though of (but not done) the possibility of using css :-> to hide and show :-> different versions of the second select list rather than :-> adding/removing :-> elements with javascript. Not sure which would be a better :-> way to go as they :-> both will require some scripting. The css hide/show :-> version's script is :-> pertty trivial though. :-> :-> Cheers, :-> Derek :-> :-> -----Original Message- :-> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 12:54 PM :-> To: [EMAIL PROTECTED] :-> Subject: RE: Hierarchical Lists :-> :-> :-> Short of a reload, I believe only a JavaScript/DHTML :-> function can provide :-> this behavior. :-> :-> :-> -Original Message- :-> From: Randy Dillon [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 2:48 PM :-> To: Struts Users Mailing List :-> Subject: Hierarchical Lists :-> :-> :-> Say I have 2 (or more) lists that are part of a hierarchy, :-> such that the :-> first list is a category (say Food Groups) and the second :-> list contains :-> children of each of the first list's items (for this :-> example, let's say Food :-> Types). :-> :-> How do I get the second list to be filtered based on the :-> selection in the :-> first list? I know this can be done by reloading the page :-> each time the :-> selection is changed in the first list, but is there a way :-> to do this :-> without the page reload? :-> :-> To add more detail to the example: :-> :-> Food Groups Food Types :-> --- -- :-> Meat&Dairy Beef :-> Chicken :-> Milk :-> Eggs :-> Fruit&Veg Melons :-> Apples :-> Oranges :-> Lettuce :-> . . :-> . . :-> . . :-> :-> If Meat&Dairy is selected in the Food Groups list, can the :-> second Food Types :-> list be filtered to only the Meat&Dairy food types without :-> a page reload? :-> :-> :-> :-> - :-> To unsubscribe, e-mail: [EMAIL PROTECTED] :-> For additional commands, e-mail: [EMAIL PROTECTED] :-> :-> :-> - :-> To unsubscribe, e-mail: [EMAIL PROTECTED] :-> For additional commands, e-mail: [EMAIL PROTECTED] :-> :-> :-> - :-> To
RE: Hierarchical Lists
If you just wanna do it using Javascript, then I can share with you something I've used before. I uploaded them here: http://www.rabago.net/select/select.htm - has three levels. The javascript code is commented so you can follow what it does (in case you're not that familiar with js) http://www.rabago.net/select/simpler.htm - shows the same code but with only two levels of data Both of these require that you have all the needed data when the page shows. If you need to make a call to the server to get the data once a filter item has been selected, check the link I sent earlier. hth, Hubert --- "Scherger, Derek" <[EMAIL PROTECTED]> wrote: > You might use something like > > ... > > ... > ... > ... > ... > > Then in the onchange event of the parent-list you can call a javascript > function that would do > > list = document.getElementById(child) > list.style.display=""; // show list > list.style.display="none"; // hide list > > as required. > > You'll have to set the proper list to be visible when the page first loads > and you'll have to keep track of which list is currently visible (in > javascript) so that you can toggle it off and the next one on. > > This type of thing seems to be working pretty well for me at the moment, > although I haven't done exactly this. > > Let mw know how it works out. > > Cheers, > Derek > > > -----Original Message- > From: Randy Dillon [mailto:[EMAIL PROTECTED] > Sent: Wednesday, March 17, 2004 2:46 PM > To: Struts Users Mailing List > Subject: RE: Hierarchical Lists > > > Derek, > > That's an interesting concept. My CSS skills are pretty basic though. How > could you use CSS to do it? Would it work if the first list was > multi-select with many different possible combinations? > > :-> -Original Message- > :-> From: Scherger, Derek [mailto:[EMAIL PROTECTED] > :-> Sent: Wednesday, March 17, 2004 3:32 PM > :-> To: 'Struts Users Mailing List' > :-> Subject: RE: Hierarchical Lists > :-> > :-> > :-> I've though of (but not done) the possibility of using css > :-> to hide and show > :-> different versions of the second select list rather than > :-> adding/removing > :-> elements with javascript. Not sure which would be a better > :-> way to go as they > :-> both will require some scripting. The css hide/show > :-> version's script is > :-> pertty trivial though. > :-> > :-> Cheers, > :-> Derek > :-> > :-> -Original Message- > :-> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > :-> Sent: Wednesday, March 17, 2004 12:54 PM > :-> To: [EMAIL PROTECTED] > :-> Subject: RE: Hierarchical Lists > :-> > :-> > :-> Short of a reload, I believe only a JavaScript/DHTML > :-> function can provide > :-> this behavior. > :-> > :-> > :-> -Original Message- > :-> From: Randy Dillon [mailto:[EMAIL PROTECTED] > :-> Sent: Wednesday, March 17, 2004 2:48 PM > :-> To: Struts Users Mailing List > :-> Subject: Hierarchical Lists > :-> > :-> > :-> Say I have 2 (or more) lists that are part of a hierarchy, > :-> such that the > :-> first list is a category (say Food Groups) and the second > :-> list contains > :-> children of each of the first list's items (for this > :-> example, let's say Food > :-> Types). > :-> > :-> How do I get the second list to be filtered based on the > :-> selection in the > :-> first list? I know this can be done by reloading the page > :-> each time the > :-> selection is changed in the first list, but is there a way > :-> to do this > :-> without the page reload? > :-> > :-> To add more detail to the example: > :-> > :-> Food Groups Food Types > :-> --- -- > :-> Meat&DairyBeef > :-> Chicken > :-> Milk > :-> Eggs > :-> Fruit&Veg Melons > :-> Apples > :-> Oranges > :-> Lettuce > :-> . . > :-> . . > :-> . . > :-> > :-> If Meat&Dairy is selected in the Food Groups list, can the > :-> second Food Types > :-> list be filtered to only the Meat&Dairy food types without > :-> a page reload? > :-> > :-> > :-> --
RE: Hierarchical Lists
You might use something like ... ... ... ... ... Then in the onchange event of the parent-list you can call a javascript function that would do list = document.getElementById(child) list.style.display=""; // show list list.style.display="none"; // hide list as required. You'll have to set the proper list to be visible when the page first loads and you'll have to keep track of which list is currently visible (in javascript) so that you can toggle it off and the next one on. This type of thing seems to be working pretty well for me at the moment, although I haven't done exactly this. Let mw know how it works out. Cheers, Derek -Original Message- From: Randy Dillon [mailto:[EMAIL PROTECTED] Sent: Wednesday, March 17, 2004 2:46 PM To: Struts Users Mailing List Subject: RE: Hierarchical Lists Derek, That's an interesting concept. My CSS skills are pretty basic though. How could you use CSS to do it? Would it work if the first list was multi-select with many different possible combinations? :-> -Original Message- :-> From: Scherger, Derek [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 3:32 PM :-> To: 'Struts Users Mailing List' :-> Subject: RE: Hierarchical Lists :-> :-> :-> I've though of (but not done) the possibility of using css :-> to hide and show :-> different versions of the second select list rather than :-> adding/removing :-> elements with javascript. Not sure which would be a better :-> way to go as they :-> both will require some scripting. The css hide/show :-> version's script is :-> pertty trivial though. :-> :-> Cheers, :-> Derek :-> :-> -Original Message- :-> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 12:54 PM :-> To: [EMAIL PROTECTED] :-> Subject: RE: Hierarchical Lists :-> :-> :-> Short of a reload, I believe only a JavaScript/DHTML :-> function can provide :-> this behavior. :-> :-> :-> -Original Message- :-> From: Randy Dillon [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 2:48 PM :-> To: Struts Users Mailing List :-> Subject: Hierarchical Lists :-> :-> :-> Say I have 2 (or more) lists that are part of a hierarchy, :-> such that the :-> first list is a category (say Food Groups) and the second :-> list contains :-> children of each of the first list's items (for this :-> example, let's say Food :-> Types). :-> :-> How do I get the second list to be filtered based on the :-> selection in the :-> first list? I know this can be done by reloading the page :-> each time the :-> selection is changed in the first list, but is there a way :-> to do this :-> without the page reload? :-> :-> To add more detail to the example: :-> :-> Food Groups Food Types :-> --- -- :-> Meat&Dairy Beef :-> Chicken :-> Milk :-> Eggs :-> Fruit&Veg Melons :-> Apples :-> Oranges :-> Lettuce :-> . . :-> . . :-> . . :-> :-> If Meat&Dairy is selected in the Food Groups list, can the :-> second Food Types :-> list be filtered to only the Meat&Dairy food types without :-> a page reload? :-> :-> :-> :-> - :-> To unsubscribe, e-mail: [EMAIL PROTECTED] :-> For additional commands, e-mail: [EMAIL PROTECTED] :-> :-> :-> - :-> To unsubscribe, e-mail: [EMAIL PROTECTED] :-> For additional commands, e-mail: [EMAIL PROTECTED] :-> :-> :-> - :-> To unsubscribe, e-mail: [EMAIL PROTECTED] :-> For additional commands, e-mail: [EMAIL PROTECTED] :-> :-> - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
RE: Hierarchical Lists
Derek, That's an interesting concept. My CSS skills are pretty basic though. How could you use CSS to do it? Would it work if the first list was multi-select with many different possible combinations? :-> -Original Message- :-> From: Scherger, Derek [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 3:32 PM :-> To: 'Struts Users Mailing List' :-> Subject: RE: Hierarchical Lists :-> :-> :-> I've though of (but not done) the possibility of using css :-> to hide and show :-> different versions of the second select list rather than :-> adding/removing :-> elements with javascript. Not sure which would be a better :-> way to go as they :-> both will require some scripting. The css hide/show :-> version's script is :-> pertty trivial though. :-> :-> Cheers, :-> Derek :-> :-> -Original Message- :-> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 12:54 PM :-> To: [EMAIL PROTECTED] :-> Subject: RE: Hierarchical Lists :-> :-> :-> Short of a reload, I believe only a JavaScript/DHTML :-> function can provide :-> this behavior. :-> :-> :-> -Original Message- :-> From: Randy Dillon [mailto:[EMAIL PROTECTED] :-> Sent: Wednesday, March 17, 2004 2:48 PM :-> To: Struts Users Mailing List :-> Subject: Hierarchical Lists :-> :-> :-> Say I have 2 (or more) lists that are part of a hierarchy, :-> such that the :-> first list is a category (say Food Groups) and the second :-> list contains :-> children of each of the first list's items (for this :-> example, let's say Food :-> Types). :-> :-> How do I get the second list to be filtered based on the :-> selection in the :-> first list? I know this can be done by reloading the page :-> each time the :-> selection is changed in the first list, but is there a way :-> to do this :-> without the page reload? :-> :-> To add more detail to the example: :-> :-> Food Groups Food Types :-> --- -- :-> Meat&Dairy Beef :-> Chicken :-> Milk :-> Eggs :-> Fruit&Veg Melons :-> Apples :-> Oranges :-> Lettuce :-> . . :-> . . :-> . . :-> :-> If Meat&Dairy is selected in the Food Groups list, can the :-> second Food Types :-> list be filtered to only the Meat&Dairy food types without :-> a page reload? :-> :-> :-> :-> - :-> To unsubscribe, e-mail: [EMAIL PROTECTED] :-> For additional commands, e-mail: [EMAIL PROTECTED] :-> :-> :-> - :-> To unsubscribe, e-mail: [EMAIL PROTECTED] :-> For additional commands, e-mail: [EMAIL PROTECTED] :-> :-> :-> - :-> To unsubscribe, e-mail: [EMAIL PROTECTED] :-> For additional commands, e-mail: [EMAIL PROTECTED] :-> :-> - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
RE: Hierarchical Lists
I've though of (but not done) the possibility of using css to hide and show different versions of the second select list rather than adding/removing elements with javascript. Not sure which would be a better way to go as they both will require some scripting. The css hide/show version's script is pertty trivial though. Cheers, Derek -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: Wednesday, March 17, 2004 12:54 PM To: [EMAIL PROTECTED] Subject: RE: Hierarchical Lists Short of a reload, I believe only a JavaScript/DHTML function can provide this behavior. -Original Message- From: Randy Dillon [mailto:[EMAIL PROTECTED] Sent: Wednesday, March 17, 2004 2:48 PM To: Struts Users Mailing List Subject: Hierarchical Lists Say I have 2 (or more) lists that are part of a hierarchy, such that the first list is a category (say Food Groups) and the second list contains children of each of the first list's items (for this example, let's say Food Types). How do I get the second list to be filtered based on the selection in the first list? I know this can be done by reloading the page each time the selection is changed in the first list, but is there a way to do this without the page reload? To add more detail to the example: Food Groups Food Types --- -- Meat&Dairy Beef Chicken Milk Eggs Fruit&Veg Melons Apples Oranges Lettuce . . . . . . If Meat&Dairy is selected in the Food Groups list, can the second Food Types list be filtered to only the Meat&Dairy food types without a page reload? - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
Re: Hierarchical Lists
Try this: http://www.oreillynet.com/pub/a/javascript/2002/02/08/iframe.html --- Randy Dillon <[EMAIL PROTECTED]> wrote: > Say I have 2 (or more) lists that are part of a hierarchy, such that the > first list is a category (say Food Groups) and the second list contains > children of each of the first list's items (for this example, let's say > Food Types). > > How do I get the second list to be filtered based on the selection in the > first list? I know this can be done by reloading the page each time the > selection is changed in the first list, but is there a way to do this > without the page reload? > > To add more detail to the example: > > Food Groups Food Types > --- -- > Meat&DairyBeef > Chicken > Milk > Eggs > Fruit&Veg Melons > Apples > Oranges > Lettuce > . . > . . > . . > > If Meat&Dairy is selected in the Food Groups list, can the second Food > Types list be filtered to only the Meat&Dairy food types without a page > reload? > > > - > To unsubscribe, e-mail: [EMAIL PROTECTED] > For additional commands, e-mail: [EMAIL PROTECTED] > __ Do you Yahoo!? Yahoo! Mail - More reliable, more storage, less spam http://mail.yahoo.com - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
RE: Hierarchical Lists
Short of a reload, I believe only a JavaScript/DHTML function can provide this behavior. -Original Message- From: Randy Dillon [mailto:[EMAIL PROTECTED] Sent: Wednesday, March 17, 2004 2:48 PM To: Struts Users Mailing List Subject: Hierarchical Lists Say I have 2 (or more) lists that are part of a hierarchy, such that the first list is a category (say Food Groups) and the second list contains children of each of the first list's items (for this example, let's say Food Types). How do I get the second list to be filtered based on the selection in the first list? I know this can be done by reloading the page each time the selection is changed in the first list, but is there a way to do this without the page reload? To add more detail to the example: Food Groups Food Types --- -- Meat&Dairy Beef Chicken Milk Eggs Fruit&Veg Melons Apples Oranges Lettuce . . . . . . If Meat&Dairy is selected in the Food Groups list, can the second Food Types list be filtered to only the Meat&Dairy food types without a page reload? - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
