I have three javascript cascading drop down menus , how would I populate the
fields from data in an oracle table called category_menu. I just would like
to know where to start because this is not as simple as just populating a
select field
The table is tree structured so for example it would look like this, dont
know if anybody has created a table like this before? but you should see how
it all related from the structure below
CATNO CATEGORY PARENT_LEVEL
0 SUPPORT
1 SERVER SUPPORT 0
2 DESKTOP SUPPORT 0
1.1 COLDFUSION 1
1.2 E-MAIL 1
1.21 OFFICEPOWER 1.2
1.22 EXCHANGE 1.2
As you can see from the actual working javascript cascading select lists
attached that this is quite a complicated script, but how would you build
that functionality into the dropdowns when all the data is generated from
the database table ?? At present the values are hard coded into the
javascript as a test, but the data will end up coming from the category_menu
database table.
Or is this actually possible???? do you need all of the javascript or can it
be done through SQL?
Ian
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Cascading dropdown lists</title>
<style type="text/css">
select {font-size: 7.0pt; width: 183px; height: 20px;}
</style>
</head>
<body>
<script language='javascript'>
//Author: Paul Berry - [EMAIL PROTECTED]
//Date: July 2002
//Licence: Its Freeware!... Just leave my name against the code and send me
a mail if you like.
//Purpose: Provides simple dropdown functionality that could be used on
multiple cascading dropdown lists.
//Compatability: This process will work on both IE and Netscape (tested on
Ns 4.5 and IE 5.5)
var iArrayMax = 58;
var aDropdown = new Array(iArrayMax)
//as the page loads - first thing to do is to load the dropdown array
var bOk = LoadArrays()
function LoadArrays()
{
//this can be thought of as an object array, each element can be identified
as a property of the array position
// a very powerful structure for 'client side' data caching.
// for better understanding and overview:
// I_ = prefix for first level entries
// II_ = prefix for second level entries
// III_ = prefix for third level entries
// second level entries (first level entries see below at the first <select>
tag!)
Array[0] = new sElement('I_Admin','II_AdminDummy','Select a category');
Array[1] = new sElement('I_Admin','II_AdminFormsCodes','Administrative Forms
& Codes');
Array[2] = new sElement('I_Tutorials','II_TutorialsDummy','Select a sub
category');
Array[3] = new sElement('I_Tutorials','II_AntiVirus','Anti Virus');
Array[4] = new sElement('I_Tutorials','II_Databases','Databases');
Array[5] = new sElement('I_Tutorials','II_Networks','Networks');
Array[6] = new sElement('I_Tutorials','II_Desktop','Desktop');
Array[7] = new sElement('I_Tutorials','II_EMail','E-Mail');
Array[8] = new sElement('I_Tutorials','II_Internet','Internet/Intranet');
Array[9] = new sElement('I_Tutorials','II_Servers','Servers');
Array[10] = new sElement('I_Tutorials','II_Member','Member Support');
Array[11] = new sElement('I_OtherDocs','II_OtherDocsDummy','Select a
category');
Array[12] = new sElement('I_OtherDocs','II_Business','Business Continuity');
Array[13] = new sElement('I_OtherDocs','II_DocTemplates','Document
Templates');
Array[14] = new sElement('I_OtherDocs','II_Security','Security and
Backups');
Array[15] = new sElement('I_OtherDocs','II_Minutes','Meeting Minutes');
Array[16] = new sElement('I_OtherDocs','II_Whitepapers','Whitepapers');
// third level entries
Array[17] = new sElement('II_AdminFormsCodes','III_PForms','Pasta Forms');
Array[18] = new sElement('II_AdminFormsCodes','III_PCodes','Pasta Codes');
Array[19] = new sElement('II_AdminFormsCodes','III_FForms','Flexitime
Forms');
Array[20] = new sElement('II_AdminFormsCodes','III_EForms','Expense Forms');
// (no further entries for II_AntiVirus "Anti Virus")
Array[21] = new sElement('II_Databases','III_Oracle','Oracle');
Array[22] = new sElement('II_Databases','III_Informix','Informix');
Array[23] = new sElement('II_Databases','III_Ingres','Ingres');
Array[24] = new sElement('II_Networks','III_FaultDiag','Fault Diagnostics');
Array[25] = new sElement('II_Networks','III_Diagrams','Diagrams');
Array[26] = new sElement('II_Networks','III_NetEx1','example');
Array[27] = new sElement('II_Networks','III_NetEx2','example');
Array[28] = new sElement('II_Desktop','III_SettingUp','Setting up a news
PC');
Array[29] = new sElement('II_Desktop','III_DeskEx1','example');
Array[30] = new sElement('II_Desktop','III_DeskEx2','example');
Array[31] = new sElement('II_Desktop','III_DeskEx3','example');
Array[32] = new sElement('II_EMail','III_MSExchange','Microsoft Exchange');
Array[33] = new sElement('II_EMail','III_SMTPPOP','SMTP / POP 3');
Array[34] = new sElement('II_EMail','III_OfficepowerMail','Officepower
Mail');
Array[35] = new sElement('II_EMail','III_EMailEtc','etc');
Array[36] = new sElement('II_Internet','III_Updating','Updating the
Corporate Intranet');
Array[37] = new sElement('II_Internet','III_Guide','Guide to Coldfusion');
Array[38] = new sElement('II_Internet','III_HTMLEx','HTML Examples');
Array[39] = new sElement('II_Internet','III_IntEtc','etc');
Array[40] = new sElement('II_Servers','III_Citrix','Citrix');
Array[41] = new sElement('II_Servers','III_Officepower','Officepower');
Array[42] = new sElement('II_Servers','III_Unix','Unix');
Array[43] = new sElement('II_Servers','III_Windows2000','Windows 2000');
Array[44] = new sElement('II_Servers','III_ServersEx','example');
// (no further entries for II_Servers "Servers")
// (no further entries for II_Business "Business Continuity")
Array[45] = new sElement('II_DocTemplates','III_WordTemp','Word Document
Templates')
Array[46] = new sElement('II_DocTemplates','III_ExTemp','Example Template')
Array[47] = new sElement('II_DocTemplates','III_DocTempEtc','etc')
Array[48] = new sElement('II_Security','III_DatabaseBackups','Database
Backups')
Array[49] = new sElement('II_Security','III_ServerBackups','Server Backups')
Array[50] = new sElement('II_Security','III_GeneralBackups','General
Backups')
Array[51] = new sElement('II_Minutes','III_ManagementTeam','Management
Team')
Array[52] = new sElement('II_Minutes','III_InfoTech','Information Technology
Steering Group')
Array[53] = new sElement('II_Minutes','III_ITOG','I.T.O.G')
Array[54] = new sElement('II_Minutes','III_TechSupport','Technical Support')
Array[55] = new sElement('II_Minutes','III_CustomerServices','Customer
Services')
Array[56] = new sElement('II_Whitepapers','III_TechWhitePapers','Technical
White Papers')
Array[57] = new
sElement('II_Whitepapers','III_BusinessWhitePapers','Business White Papers')
Array[58] = new
sElement('II_Whitepapers','III_WhitepapersGeneral','General')
return true
}
function sElement(sParentId,sValue,sDescription)
{
// elements that will be loaded into the array structure and persisted
// think of it as an object.
this.ParentId = sParentId
this.Id = sValue
this.Description = sDescription
}
function bCascadeDrop(oDDsource,oDDdest)
{
//function to enable cascading dropdowns
//called as the parent dropdown changes.
var iX
var sText
var iY= 0
var sOptionId
var sOptionDesc
var iStartPos
//find the value of the item currently selected
sText = oDDsource.options[oDDsource.selectedIndex].value
if (sText != '0')
{
//clear down the destination list box
oDDdest.options.length = 0
//loop through the elements that are in the array
// if they match the parent if then they should be displayed.
for (iX=0; iX<=iArrayMax; iX++)
{
if(sText == Array[iX].ParentId)
{
//grab the values out of the element (Netscape is not happy doing too
many things in a function call!)
sOptionId = Array[iX].Id
sOptionDesc= Array[iX].Description
//write the element into the dripdown box.
oDDdest.options[iY] = new Option (sOptionDesc,sOptionId)
iY = iY +1
}
}
}
}
</script>
<form action="FrmNew">
<table>
<tr>
<td>
<!-- first level entries -->
<select name="firstlevel" onChange="bCascadeDrop(this,
document.forms[0].secondlevel);document.forms[0].thirdlevel.length=0">
<option value="0" SELECTED> Select a Main Category </option>
<option value="0"> </option>
<option value="I_Admin" >Administrative Documents & Forms</option>
<option value="I_Tutorials">Tutorials/Guidance Notes</option>
<option value="I_OtherDocs">Other Documents & Information</option>
</select>
</td>
<td>
<select name="secondlevel" onChange="bCascadeDrop(this,
document.forms[0].thirdlevel)">
<option value="0" SELECTED> <-------------------- </option>
</select>
</td>
<td>
<select name="thirdlevel">
<option value="0" SELECTED> <-------------------- </option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Archives: http://www.houseoffusion.com/cf_lists/index.cfm?forumid=4
Subscription:
http://www.houseoffusion.com/cf_lists/index.cfm?method=subscribe&forumid=4
FAQ: http://www.thenetprofits.co.uk/coldfusion/faq
Your ad could be here. Monies from ads go to support these lists and provide more
resources for the community. http://www.fusionauthority.com/ads.cfm
