Ian,
Did you have a look at the twoselectsrelated custom tag?
It might be a little out of date and may need tidying up a little, but that
will do exactly what you're attempting.
Hope this helps
Regards
Stephen
----- Original Message -----
From: "Ian Vaughan" <[EMAIL PROTECTED]>
To: "CF-Talk" <[EMAIL PROTECTED]>
Sent: Thursday, December 19, 2002 2:41 PM
Subject: Re: Please help me achieve this with CF and Javascrip please
> Hi Neil
>
> I e-mailed a question to you at the start of December.
>
> What I was and still am trying to achieve was creating related selects
> generated from one database table and you provided me with some code.
>
> I am getting somewhere with this now and there is only one small part that
> needs to be resolved (javascript problem) before my deadline tommorrow for
> this to work correctly, and I am contacting you for your expert opinion
with
> the hope of a possible solution please.
>
> Using the code below the first select box is being populated from the
> database as it should, however when I select an option from this list the
> second select does not list the related items and there is a javascript
> error
>
> 'ChapterArray1' is undefined.
>
> Can you see from my code where this may be going wrong??
>
>
> Ian
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
>
> <html>
> <head>
> <title>Untitled</title>
> </head>
>
> <body>
>
> <!--- Select the ATA_Chapter, ATA_Section and title_Codes. --->
> <CFQUERY name="query1" datasource="intranetv8">
> SELECT
> catno, category, parent_level from category_menu
> where parent_level = 0
> ORDER BY category
>
> </CFQUERY>
>
> <CFQUERY name="query2" datasource="intranetv8">
> SELECT
> catno, category, parent_level from category_menu
> where catno = parent_level
> ORDER BY category
>
> </CFQUERY>
>
> <!--- Select all the sub codes. --->
>
> <script language = "JavaScript">
> <!--
> // For each chapter, create an array to hold the sections.
> // Each chapter array will be identified by the ATA_Chapter
> <cfoutput query="query2" group="category">
> // Create the array
> ChapterArray#category# = new Array();
> ChapterArrayVal#catno# = new Array();
> <cfset i = 0>
> // Populate the array
> <cfoutput>
> <cfset i = i + 1>
> ChapterArray#catno#[#i#] = #category#;
> ChapterArrayVal#catno#[#i#] = "#parent_level# #category#";
> </cfoutput>
> </cfoutput>
>
>
> // Function to populate the ATA_Sub_Codes for the ATA_Code selected
> function PopulateATASubCode() {
> // Only process the function if the first item is not selected.
> var indx = document.InsertForm.ATACode.selectedIndex;
> if (indx != 0) {
> // Find the Chapter
> var ThisChapter = document.InsertForm.ATACode[indx].value;
> // Set the length of the ATA_Sub_Codes drop down equal to the length of
the
> Chapter's array
> var len;
> len = eval("ChapterArray" + ThisChapter + ".length");
> document.InsertForm.ATA_SubCode.length = len;
> // Put 'Select' as the first option in the SubCode drop-down
> document.InsertForm.ATA_SubCode[0].value = "";
> document.InsertForm.ATA_SubCode[0].text = "Select Sub Category";
> document.InsertForm.ATA_SubCode[0].selected = true;
> // Loop through the chapter's array and populate the SubCode drop down.
> for (i=1; i<len; i++) {
> document.InsertForm.ATA_SubCode.value = eval("ChapterArray" + ThisChapter
+
> "");
> document.InsertForm.ATA_SubCode.text = eval("ChapterArrayVal" +
ThisChapter
> + "");
> }
> }
> }
> //-->
> </script>
>
> <html>
> <head>
> <title>Requirements Database Add Requirement</title>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> </head>
> <body>
> <form action="#" method="POST" name="InsertForm" id="InsertForm">
> <table>
> <tr>
> <td> <select name="ATACode" onChange="PopulateATASubCode();">
> <option value="0">Select ATA Code <cfoutput query="query1"
group="category">
> <option value="#catno#">#Category# #Category# </cfoutput>
> </select>
> <select name="ATA_SubCode" size="1">
> <option value="0">Select ATA Sub Code
> </select></td>
> </tr>
> </table>
>
> </body>
> </html>
>
> ----- Original Message -----
> From: Thomas Hoheneder
> To: Ian Vaughan
> Sent: Friday, November 01, 2002 6:27 PM
> Subject: Re: Advanced Javascript and Forms ???
>
>
> Hello Ian,
>
> oh... I have seen that the link to earthweb.com was your own discovery
;-)
> so you might know the example ;-)) [LOL]
>
> The fine aspect of this algorithm is that the function bCascadeDrop()
> needs not to be updated any time (when just adding further selects and
> entries within them).
> Only a new <select> tag and the appropriate Array elements need to be
> added.
>
> Greetings from
> Thomas
> ----- Original Message -----
> From: Ian Vaughan
> To: [EMAIL PROTECTED]
> Sent: Friday, November 01, 2002 3:58 PM
> Subject: Advanced Javascript and Forms ???
>
>
> Hi Thomas
>
> I have been reading your postings on the javascript newsgroup and have
> been impressed with your knowledge with the language, and would be
grateful
> if someone of your experience and caliber in javascript will be able to
> assist me in this problem I am having please.
>
> I just have a quick query for you please, I have been trying to get my
> head around this week, but am still having problems, I would be grateful
if
> you could help me out please.
>
> In the script below I am trying to add another select box based on the
> value chosen from the second select box, so basically a third select box .
I
> know I am going to perhaps need a new onchange value on the second select
?
> but where do the arrays need to be specified etc
>
> I would appreciate a lead on this please
>
> Thankyou
> Ian
>
>
> <SCRIPT LANGUAGE="JavaScript">
>
>
> <!-- Begin
> var minutesArray = new Array("('Select Sub Category','',true,true)",
> "('Management Team')",
> "('Information Technology Steering Group')",
> "('I.T.O.G')",
> "('Technical Support')",
> "('Customer Services')");
> var backupArray = new Array("('Select Sub Category','',true,true)",
> "('Database Backups')",
> "('Server Backups')",
> "('General Backups')");
> var DatabasesArray = new Array("('Select a Sub
> Category','',true,true)",
> "('')",
> "('Oracle')",
> "('Informix')",
> "('Ingres')");
> var wpaperArray = new Array("('Select Sub Category','',true,true)",
> "('Technical White Papers')",
> "('Business White Papers')",
> "('General')");
> var adminArray = new Array("('Select Sub Category','',true,true)",
> "('Pasta Forms')",
> "('Pasta Codes')",
> "('Flexitime Forms')",
> "('Expense Forms')");
> var NetworksArray = new Array("('Select Sub Category','',true,true)",
> "('Fault Diagnostics')",
> "('Diagrams')",
> "('example')",
> "('example')");
> var ServersArray = new Array("('Select Sub Category','',true,true)",
> "('Citrix')",
> "('Officepower')",
> "('Unix')",
> "('Windows 2000')",
> "('example')");
> var DesktopArray = new Array("('Select Sub Category','',true,true)",
> "('Setting up a new PC')",
> "('example')",
> "('example')",
> "('example')");
> var internetArray = new Array("('Select Sub Category','',true,true)",
> "('Updating the Corporate Intranet')",
> "('Guide to Coldfusion')",
> "('HTML Examples')",
> "('etc')");
> var templateArray = new Array("('Select Sub Category','',true,true)",
> "('Word Document Templates')",
> "('Example Template')",
> "('etc')");
> var emailArray = new Array("('Select Sub Category','',true,true)",
> "('Microsoft Exchange')",
> "('SMTP / POP 3')",
> "('Officepower Mail')",
> "('etc')");
>
> function populateCategory(inForm,selected) {
> var selectedArray = eval(selected + "Array");
> while (selectedArray.length < inForm.category2.options.length) {
> inForm.category2.options[(inForm.category2.options.length - 1)] =
null;
> }
> for (var i=0; i < selectedArray.length; i++) {
> eval("inForm.category2.options[i]=" + "new Option" +
selectedArray[i]);
> }
> if (inForm.category1.options[0].value == '') {
> inForm.category1.options[0]= null;
> if ( navigator.appName == 'Netscape') {
> if (parseInt(navigator.appVersion) < 4) {
> window.history.go(0);
> }
> else {
> if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
> window.history.go(0);
> }
> }
> }
>
> }
> }
> // End -->
> </script>
>
>
> <select name="category1"
>
onChange="populateCategory(document.form,document.form.category1.options[doc
> ument.form.category1.selectedIndex].value)" style="font-size: 7.0pt;
width:
> 183px; height: 20px;">
> <option selected value=''>Select a Category</option>
> <option value='Anti Virus'>Anti Virus</option>
> <option value='backup'>Business Continuity</option>
> <option value='wpaper'>Whitepapers</option>
> </select>
>
> <select name="category2" style="font-size: 7.0pt; width: 183px;
height:
> 20px;">
> <option value=''><--------------------</option>
> </select>
>
>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
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
Signup for the Fusion Authority news alert and keep up with the latest news in
ColdFusion and related topics. http://www.fusionauthority.com/signup.cfm
