On Mon, 17 May 1999, Service Informatique CHSR wrote:

...

Cascading menus are pretty simple using a little Javascript... And it should be possible to have the interface provide a traditional long-john add list in the absence of Javascript. Basically you have the Javascript change the contents of menu B based on the selection in menu A. I have a sample in Zope based on data pulled from an SQL query, ***if you're interested*** I am

Thanks in advance

First, note that on looking back at it, I see that I used listboxes, but the same techniques should apply as with pull-down menus, you just change the way you declare the html. All the javascript should be identical, if I'm not mistaken. Oh, BTW, this is the first major piece of Javascript I've written. To see it in action, go to http://www.sths.org/genus/uber/login and login as 'test' with password 'testing'. Then go to http://www.sths.org/genus/uber/classifications.htm. Making a selection here in the center listbox changes the options available in the rightmost listbox.. To see the structure which determines the options in the two listboxes, go to http://www.sths.org/genus/uber/renderall. Also, note that this is a work in progress, and that this javascript is partially dynamically generated by DTML, so it might be best to go to the address above and look at the page source to get a cleaner picture of how the code works. **** the code **** <!--#var standard_html_header--> <!--#var second_header--> <SCRIPT LANGUAGE="JavaScript"> <!-- <!--#in categoriesdb--> <!--#if sequence-start--> var cats = new Array(1); <!--#/if--> cats[<!--#var idx-->]=<!--#var sublevel-->; <!--#/in--> <!--#in categoriesdb--> <!--#if sequence-start--> var classif = new Array(<!--#var count-name-->); <!--#/if--> temp=<!--#var sequence-index-->; <!--#in "classifylvldb(level=idx)"--> <!--#if sequence-start--> classif[temp]= new Array(<!--#var count-name-->); <!--#/if--> classif[temp][<!--#var sequence-index-->] = new Array("<!--#var name--> - <!--#var ccname-->",<!--#var idx-->); <!--#/in--> <!--#/in--> function showParents(categoryIndex) { temp = categoryIndex - 1; //empty it for (i=0; i<document.addform.prnts.length;i++) { document.addform.prnts.options[i].text=" "; } if (temp<0) return; if (!classif[temp]) return; if (!document.addform.prnts.options[0]) { document.addform.prnts.options[0]=new Option('None'); document.addform.prnts.options[0].value=-1; } document.addform.prnts.options[0].text = 'None'; document.addform.prnts.options[0].value = -1; document.addform.prnts.options[0].selected = 1; for (i=1;i<=classif[temp].length;i++) { if (!document.addform.prnts.options[i]) { document.addform.prnts.options[i]=new Option(classif[temp][i-1]); } document.addform.prnts.options[i].text = classif[temp][i-1][0]; document.addform.prnts.options[i].value = classif[temp][i-1][1]; document.addform.prnts.options[i].selected = 0; } } //--> </SCRIPT> <br> <center> <form name="addform" ACTION="classifications_response" METHOD="POST"> <!--#var tbl_start--> <tr><td colspan=3><center><font size=+2>Add Classifications</font></center></td></tr> <tr> <td> Classification Name:<br> <input type="text" name="name" value=""> </td> <td> Classification Level:<br> <!--#in categoriesdb--> <!--#if sequence-start--> <select name="categ" size="15" onChange="if (selectedIndex>-1) showParents(cats[this.options[selectedIndex].value]-1);"> <!--#/if--> <option value="<!--#var idx-->"><!--#var name--> <!--#if sequence-end--> </select> <!--#/if--> <!--#/in--> </td> <td> Classification Parent:<br> <select name="prnts" width=10 size=15> <option value="">                                          </select> </td> </tr> <tr> <td colspan=3> <center><input type="submit"></center> </td> </tr> </table> </form> </center> <!--#var standard_html_footer--> Enjoy!

Regards, Jephte CLAIN Service Informatique

-- Howard Clinton Shaw III - Grum St. Thomas High School #include <disclaimer.h>