WebReference.com - Universal Related Pop-up Menus - Single Form Version II - (3/6)

[previous] [next]

URPM: Single Form Version II

Script Changes

It didn't take much work to fit the script to the new arrays. All that was required was to check for the presence of an array in the initLists() function by testing to see if the data type is an object. If it is, I call the O (Object) constructor with both a text and a value argument, otherwise, I substitute a null for the value, as in the old version:

    for(var i=0; i<a.length;i++) {
      if (a[i].length) {
        //create a new Option with the appropriate submenu
        subMenu = arg == argLen ? null : m[oldSubI++];
        temp[temp.length] = typeof(a[i])== "object"  ?
                            new O(a[i][0], a[i][1], subMenu ) :
           	            new O(a[i] ,   null ,   subMenu ); 
      }
      else
      { ...
       

I made up the system of storing the list contents in individual arrays because I had a lot of difficulty dealing with a giant array of "O" Objects. While my system worked well for me, it did not make it any easier on others, like I thought it would. A few people who wrote asked me if I could go over how this works, so I will start over and see if I can't clarify things a bit here.

There are a total of 4 arrays declared at the top of the old vs. new array example presented on the previous page. The m array is used to store the final list linking information, and the other three are for each listbox. You don't have to intertwine the arrays for the script to work, but I laid them out that way so that I can easily see which items in one list correspond to which subcategories in the next list. The easiest way to go about setting up the arrays is to start with the base list. Start with an array index of 0 and set each menu item from start to finish (see Step 1 below). Now that you've got your base list, insert all the relevant subcategories between each entry, without indexes (see Step 2). In my example, it's the model. Once you've done this, add an empty array element after the last subcategory (see Step 3a) and add the indexes, again starting from 0 (see Step 3b). The empty element is what tells the script to start a new subcategory. Then repeat the same process for all subcategories (see Step 4). When you're done, you should have the same kind of layout as on the previous page.

Step 1: construct the base list

manufacturer[0]=["ACURA", "ACU"];
manufacturer[1]=["ALFA ROMEO", "AR"];
...

Step 2: Add the subcategories

manufacturer[0]=["ACURA", "ACU"];
  model[]="CL";   //no value
  model[]="EL";
  model[]=["INTEGRA", "INT"];
manufacturer[1]=["ALFA ROMEO", "AR"];
  model[]=["SEDAN LS", "SLS"];
  model[]=["SPIDER", "SPI"];
...

Step 3a: Insert an empty array after each subcategory group

manufacturer[0]=["ACURA", "ACU"];
  model[]="CL";   //no value
  model[]="EL";
  model[]=["INTEGRA", "INT"];
  model[]=[];
manufacturer[1]=["ALFA ROMEO", "AR"];
  model[]=["SEDAN LS", "SLS"];
  model[]=["SPIDER", "SPI"];
  model[]=[];
...

Step 3b: Insert indexes, starting form 0

manufacturer[0]=["ACURA", "ACU"];
  model[0]="CL";   //no value
  model[1]="EL";
  model[2]=["INTEGRA", "INT"];
  model[3]=[];
manufacturer[1]=["ALFA ROMEO", "AR"];
  model[4]=["SEDAN LS", "SLS"];
  model[5]=["SPIDER", "SPI"];
  model[6]=[];
...

Step 4: Repeat steps 2 and 3 for each subcategory

manufacturer[0]=["ACURA", "ACU"];
  model[0]="CL";   //no value
   level[0]=["2.2 PREMIUM", "2.2"];
   level[1]="2.3";
   level[2]="3.0";
   level[3]=[];    //"" still works too
  model[1]="EL";
   level[4]=["PREMIUM", "PRE"];
   level[5]="SE";
   level[6]=["SPORT", "SP"];
   level[7]=[];
  model[2]=["INTEGRA", "INT"];
   etc...
  model[3]=[];
manufacturer[1]=["ALFA ROMEO", "AR"];
  model[4]=["SEDAN LS", "SLS"];
   etc...
  model[5]=["SPIDER", "SPI"];
   etc...
  model[6]=[];
...

[previous] [next]

Written by Robert Gravelle and Created: October 2, 2001
Revised: October 2, 2001

URL: https://webreference.com/dev/menus/oneformv2/3.html