Solved

populate select list based on other list selection X 3

Posted on 2004-08-20
8
126 Views
Last Modified: 2013-12-24
i have tried CF_threeselectsRelated but cant seem to get the query right. is there another way?

What i am trying to do is something simular to carpoint.msn.com "find a car" in the upper left side. and i need the selections to change based on the radio button from my data;
which looks like this (short version)
new ford taurus
new ford escort
new dodge caravan
used toyota camra
used ford mustang
0
Comment
Question by:kleigh
  • 2
  • 2
8 Comments
 

Author Comment

by:kleigh
ID: 11855704
also see another question that i asked that might explain how i was trying to accomplish this with cf_threeselectsrelated

http://www.experts-exchange.com/Web/WebDevSoftware/ColdFusion/Q_21100785.html
0
 
LVL 35

Accepted Solution

by:
mrichmon earned 250 total points
ID: 11857643
Yes there is :

Write it yourself.

Here is the code for two related selects.  You just need to expand for three - not very hard.  Just add another blank select and have an onchange event in the second one as well as the first.

Here is the code for two:

<script type="text/javascript" language="JavaScript">
<!--
/* Dynamically populate Buyer select box based on seleted DepartmentID */
// Create an array to hold Buyers
var BuyerArray = new Array;

// Define a custom Javascript object type to represent a single Buyer
function Buyer(BuyerUsername, DepartmentID, BuyerName)
{
     this.BuyerUsername = BuyerUsername;
     this.DepartmentID = DepartmentID;
     this.BuyerName = BuyerName;
}
<!--- For each Buyer, append a new Buyer object to the array of Buyers --->
<cfoutput query="GetBuyers">
     BuyerArray[BuyerArray.length] = new Buyer("#JSStringFormat(Username)#", "#JSStringFormat(DepartmentID)#", "#JSStringFormat(BuyerName)#");
</cfoutput>

/* Fill the Buyer select box based on the DepartmentID */
function fillBuyers()
{
     // Stop if there is no selected ParentID
     if (document.AddIssue.DepartmentID.selectedIndex == -1)
     {
          return;
     }
     
     var DepartmentID = document.AddIssue.DepartmentID.options[document.AddIssue.DepartmentID.selectedIndex].value;
     
     // Remove all options in the Buyer select box
     document.AddIssue.Buyer.options.length = 0;
     
     // For each item in the Buyer array ...
     for (var i = 0; i < BuyerArray.length; i++)
     {
          // If the Buyer's DepartmentID is the same as the currently selected DepartmentID
          if (BuyerArray[i].DepartmentID == DepartmentID)
          {
               // Put a new option in the Buyer select box
               document.AddIssue.Buyer.options[document.AddIssue.Buyer.options.length] = new Option(BuyerArray[i].BuyerName, BuyerArray[i].BuyerUsername);
          }
     }
}
-->
</script>


<select name="DepartmentID" onChange="fillBuyers()" style="width: 200px;">
     <option value=""></option>
     <option value="GM">General Merchandise</option>
     <option value="TR">Trade</option>
     <option value="TX">Text</option>
</select>

<select name="Buyer" style="width: 200px;"></select>
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 11870529
here is a client side version, the array arrItems is populated from cfquery outputs
// arrayItem = new listItem(lookupcode, listItem value, listItem Text)
<cfoutput query="getItemsPrimary">arrItems[#idx#] = new listItem("R","#REGID#","#REGMGR#");<cfset idx=#idx#+1>
      </cfoutput>
      <cfoutput query="getItemsSecondary">arrItems[#idx#] = new listItem("D","#MGRID#","#DIVMGR#");<cfset idx=#idx#+1>
      </cfoutput>

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>
        Untitled
    </title>
<script language="JavaScript" type="text/javascript">var arrItems = new Array();
     var isVisible=0;
     function listItem(itemGroup, itemValue, itemText){
          this.itemGroup=itemGroup;
          this.itemValue=itemValue;
          this.itemText=itemText;
     }
     
     function populateSubList(groupID, objSub){
//this block clears the current listings in the second dropdown, if the dropdown has any
          objSub.selectedIndex=0;
          isVisible=0;
          if(objSub.options.length>1){
               for (x=objSub.options.length; x>0; x--){
                    objSub.options[x]=null;
               }
          }
//this block populates the second drop down, by matching the selected value of dropdown 1
//to the lookup value of the list items
          for(x=0; x < arrItems.length; x++){
               if(arrItems[x].itemGroup==groupID){
                    listOpt = document.createElement("option") ;
                    listOpt.value = arrItems[x].itemValue ;
                    listOpt.text = arrItems[x].itemText ;
                    objSub.add(listOpt) ;
               }
          }

     }
     
// arrayItem = new listItem(lookupcode, listItem value, listItem Text)
// arrayItem = new listItem(categorycode, productcode, product text)
     arrItems[arrItems.length] = new listItem("M","M1","Suzuki");
     arrItems[arrItems.length] = new listItem("M","M3","Honda");
     arrItems[arrItems.length] = new listItem("M","M6","Titan");
     arrItems[arrItems.length] = new listItem("M","M4","Buccatti");
     arrItems[arrItems.length] = new listItem("M","M5","BMW");
     arrItems[arrItems.length] = new listItem("M","M2","Harley Davidson");
     arrItems[arrItems.length] = new listItem("C","C29","Corvette");
     arrItems[arrItems.length] = new listItem("C","C13","Ferrarri");
     arrItems[arrItems.length] = new listItem("C","C7","Lamborghini");
     arrItems[arrItems.length] = new listItem("C","C99","Viper");
     arrItems[arrItems.length] = new listItem("C","C4","Mustang");
     arrItems[arrItems.length] = new listItem("C","C20","GTO");
     arrItems[arrItems.length] = new listItem("C","C21","De Lorean");
     arrItems[arrItems.length] = new listItem("P","P1","Cessna");
     arrItems[arrItems.length] = new listItem("P","P23","767");
     arrItems[arrItems.length] = new listItem("P","P31","Airbus");
     arrItems[arrItems.length] = new listItem("P","P17","SST");
     arrItems[arrItems.length] = new listItem("P","P33","Sea Harrier");
     arrItems[arrItems.length] = new listItem("P","P10","F16");
     arrItems[arrItems.length] = new listItem("B","B34","Row Boat");
     arrItems[arrItems.length] = new listItem("B","B3","Cigarette Boat");
     arrItems[arrItems.length] = new listItem("B","B25","Fishing Boat");
     arrItems[arrItems.length] = new listItem("B","B19","Cabin Cruiser 6");
     arrItems[arrItems.length] = new listItem("T","T11","Hummer");
       arrItems[arrItems.length] = new listItem("M1","M1A","Bike1");
       arrItems[arrItems.length] = new listItem("M1","M1B","Bike2");
       arrItems[arrItems.length] = new listItem("M1","M1C","Bike3");
       arrItems[arrItems.length] = new listItem("M1","M1D","Bike4");
       arrItems[arrItems.length] = new listItem("M1","M1E","Bike5");
       arrItems[arrItems.length] = new listItem("M1","M1F","Bike6");
</script>
</head>
   <body>        
      <form name="frmGetTracker" action="displayTracker.cfm?RequestTimeout=500" onsubmit="" method="get">
           <table cellspacing="1" cellpadding="1" border="0" width="400" bgcolor="D8DFF3">
                <tr valign="top">
                     <td width="50%">
                          <table cellspacing="1" cellpadding="1" border="0" align="centre">
                               <caption>     View By :
                               </caption>
                               <tr valign="top">
                                    <td align="center">
                                         <select name="VOPT" style="width:160" onChange="populateSubList(this.value, document.frmGetTracker.VID)">
                                              <option value="0" selected>--Select Vehicle Type</option>
                                              <option value="M">Motorcycle</option>
                                              <option value="C">Car</option>
                                              <option value="T">Truck</option>
                                                         <option value="B">Boat</option>
                                                         <option value="P">Plane</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                     <td>
                          <table cellspacing="1" cellpadding="1" border="0" width="100%">
                               <caption>     Select Name :
                               </caption>
                               <tr>
                                    <td align="center">
                                         <select name="VID" style="width:160" onChange="populateSubList(this.value, document.frmGetTracker.SUBVID)">
                                              <option value="0" selected>--Select Brand</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                               <td>
                          <table cellspacing="1" cellpadding="1" border="0" width="100%">
                               <caption>     Select Name :
                               </caption>
                               <tr>
                                    <td align="center">
                                         <select name="SUBVID" style="width:160" >
                                              <option value="0" selected>--Select Brand</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                </tr>
           </table>
      </form>
   </body>
</html>
0
 

Author Comment

by:kleigh
ID: 11873772
I must be dumb but using your code produces this error

// arrayItem = new listItem(lookupcode, listItem value, listItem Text)
--------------------------------------------------------------------------------

Error Occurred While Processing Request
Error Diagnostic Information
QUERY

The QUERY attribute of the tag does not specify the name of an available query

The error occurred while processing an element with a general identifier of (CFOUTPUT), occupying document position (2:1) to (2:34).


Date/Time: 08/23/04 14:51:10
Browser: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.0.3705; .NET CLR 1.1.4322)
Remote Address: 24.48.75.128

 

0
 
LVL 25

Assisted Solution

by:James Rodgers
James Rodgers earned 250 total points
ID: 11874010
no i was just showing how teh array was populated, the query was for example only

teh ouput shows how it works , everything after and including

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>


try ti without the query output block, you will see what i mean
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now