2 Dynamic Linked Dropdowns

Thanks for that link. I've had a bit of a look at that tag and it seems a bit much for something i think i've almost got up and working and it also uses only one cfquery and i'm unsure as to how to join my two sql statements together to go with it.

I'd rather use custom CF as there is not much more js and cf to add to my existing code to make it work (i think).

Cheers,
Brad

well i generally use a array to handle this.

ie based on the selection from the first drop down - i'll populate the 2nd list box dynamically without refreshing the form !

If u wanna have a look at it - let me know

K'Rgds
Anand

Is it possible to dynamically populate the 2nd drop down direct from the database with an onchange or similar event rather than from a static array in the page?

Or do you mean populating a dynamic array and then using that to populate the 2nd drop down menu, meaning there would be no load time between the user clicking on one of the selections in the first drop down box and the second menu's selections being able to be selected.

Cheers,
Brad

Save this code on ur machine & run it to see if it works the way u want it !


<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--

var MainID_1 = new Array()
var MainDesc_1 = new Array()
            
    MainID_1[0] = '1';            
    MainDesc_1[0] ='Ladies intimate apparel';
   
    MainID_1[1] = '2';            
    MainDesc_1[1] ='Mens underwear';
   
    MainID_1[2] = '15';            
    MainDesc_1[2] ='Hosiery';
   
    MainID_1[3] = '14';            
    MainDesc_1[3] ='Children`s underwear';
   
    MainID_1[4] = '17';            
    MainDesc_1[4] ='Swimwear';

   
var MainID_2 = new Array()
var MainDesc_2 = new Array()
      
    MainID_2[0] = '3';            
    MainDesc_2[0] ='Ladies sports clothing';
   
    MainID_2[1] = '4';            
    MainDesc_2[1] ='Mens sports clothing';
   
    MainID_2[2] = '5';            
    MainDesc_2[2] ='Childrens sports clothing';
   
    MainID_2[3] = '16';            
    MainDesc_2[3] ='Sport hardlines';


var MainID_3 = new Array()
var MainDesc_3 = new Array()
                  
    MainID_3[0] = '6';            
    MainDesc_3[0] ='Accessories';
   
    MainID_3[1] = '8';            
    MainDesc_3[1] ='Cosmetics';
   
    MainID_3[2] = '9';            
    MainDesc_3[2] ='Jewellery';
   
    MainID_3[3] = '10';            
    MainDesc_3[3] ='Watches and Clocks';
   
   
function get_assortment()
{      
      
      var cval = document.form1.categoryID.options[document.form1.categoryID.selectedIndex].value;
      if (cval!=0)
      {            
            var sval = eval("MainID_"+cval+".length")            
            if((sval == '1')&&(eval("MainID_"+cval+"")[0]=='0'))
            {
                  document.form1.AssortmentID.length = 0;
                  document.form1.AssortmentID.options[0] = new Option("Assortment","0");
            }
            else
            {
                  document.form1.AssortmentID.length = 0;      
                  document.form1.AssortmentID.options[0] = new Option("Assortment","0");            
                  for(i=1;i<=sval;i++)
                  {
                        document.form1.AssortmentID.options[i] = new Option(eval("MainDesc_"+cval+"")[i-1],eval("MainID_"+cval+"")[i-1]);
                  }
            }
      }
      else
      {
            window.parent.frames[1].location="http://Master.cfm";
            document.form1.AssortmentID.length = 0;
            document.form1.AssortmentID.options[0] = new Option("Assortment","0");
      }
      
}    
//-->
</SCRIPT>

<TABLE align="center" width="98%" cellpadding="0" cellspacing="0" border="0">
      <FORM name="form1" action="x.cfm" method="post" target="main">
            <TR align="center" valign="middle" bgcolor="e9e9e9">
                  <TD WIDTH="10%" HEIGHT="20" ALIGN="right"><FONT FACE="Verdana" SIZE="1" COLOR="000066">&nbsp;</TD>
                  <TD WIDTH="20%" HEIGHT="20" ALIGN="right"><FONT FACE="Verdana" SIZE="1" COLOR="000066">Category&nbsp;</TD>
                  <TD WIDTH="20%" HEIGHT="20" ALIGN="left"><FONT FACE="Verdana" SIZE="1" COLOR="FFFFFF">
                    <SELECT SIZE="1" NAME="categoryID" STYLE="font-family: Verdana; font-size: 10 pt" ONCHANGE="JavaScript:get_assortment()">
                          <OPTION VALUE="">Select category</option>                  
                    <OPTION VALUE="1">Lingerie</OPTION>
                    <OPTION VALUE="2">Sports</OPTION>
                    <OPTION VALUE="3">Beauty</OPTION>
                    </SELECT></FONT>                
            </TD>
                  <TD WIDTH="25%" HEIGHT="20" ALIGN="right"><FONT FACE="Verdana" SIZE="1" COLOR="000066">Assortment&nbsp;</TD>
                  <TD WIDTH="25%" HEIGHT="20" ALIGN="left"><FONT FACE="Verdana" SIZE="1" COLOR="ffffff">
                    <SELECT SIZE="1" NAME="AssortmentID" STYLE="font-family: Verdana; font-size: 10 pt" ONCHANGE="JavaScript:ChangePage()">
                      <OPTION VALUE="">Assortment</OPTION>                                                      
                    </SELECT></FONT>                
            </TD>
            </TR>
      </FORM>
</TABLE>

let me know

K'Rgds
Anand

Yep that is exactly the type of thing i'm looking for!

Only, I want it to dynamically populate from the db so that when adding categories or sub categories to the db I don't have to recode the page manually.

Also, will this work fine in netscape, opera etc as well?

Cheers,
Brad

yep it will work in all other browsers !

u will have to generate teh array formation dynamically - based on the Database records by running it in a loop

if ur not able to figure it out - let me know

I'll code it for u !

K'Rgds
Anand

Hi,

Would you be able to write the code for us? I think it would take you a lot less time than it will take me! hehe

Cheers,
Brad

thanks anandkp, due to an unforseen miracle I was able to get it done.

Managed to get the sql statement to join using Ben Forta's WACK while I was waiting. Your code worked well and
thanks for the help, you deserve the points.

Cheers,
Brad

So is it thru - or u want more help on this

if so - pls let me know ...

PS : Sorry for the delay - but since i am from a different time zone ... I am sleeping while ur awake :)

Cheers
Anand

Hi anandkp,

Well
I thought I had solved the problem as in IE it works no problem but when I tried to open it in netscape or mozilla it didn't work at all.

I think the javascript you posted up the top is the answer to getting it to work across all browsers and so it would be great if you'd fill me in on the coldfusion code to dynamically fill the array from the database.

Cheers,
Brad

Hi,

lol well we managed to solve the problem. the CFtwoselects cf tag actually does what i asked you to do. IE it populates an array and then puts it up.

The problem we were having with not working cross-browser was to do with some other code we were changing.

So finally, yes the question is answered completely.

and thank you kindly for all your great assistance. It helped us work out where we needed to be.

Cheers,
Brad

ohhhhhhhhhhk ...

No problem :)

Cheers
Anand

anandkp,
not sure if you monitor this, but how would you handle it if someone comes to the page with a categoryid and/or an assortmentid?

like an update page....

I can get the categoryid, but the assortment select is blank?

I will be happy to assign points for the answer...

Hi astro26,

I ended up actually having this problem as you can't feed a VALUE into cf_twoselectsrelated. What i ended up doing is basically having an if statement that if the value had already been filled in then had a checkbox with

Change category CB

and if the user clicked it have an onclick command that reloaded the page with the cf_twoselects related so they could change their selection.

A bit clunky i know but the best way i could work out to do it

Cheers,
Brad

thanks for the info...
I have code that I have seen which allows an item to be passed in and repopulates the first or second select, but the code it generates is unweildy at over 1000 lines when looking at the source.

I was hoping to find a better way.  

wow, yeah my 1k lines of code pages are what u like to refer to as unwieldy on their good days and 'in-need of optimization' on their bad ones!

Brad

PS : just to tune thigns up & make ur code looks neat as well

have the entire set of javascript for this in a .js file [for static records]

but if ur query returns dynamic records - then i guess - theres no bypassing the 1K code on ur page :)

Cheers
Anand