Chained Selects Examples: Share a list group with different pages

yxScripts.com

Sometimes we want to re-use the same list group content in different pages and each page can have its own default options.

For example, we have the following list content and list group:

  • Toyota
    • Car
      • Avalon
      • Camry
      • Celica
      • Corolla
    • SUVs/Van
      • 4Runner
      • Highlander
      • Land Cruiser
      • Sienna
    • Trucks
      • Tacoma
      • Tundra
  • Honda
    • Car
      • Accord
      • Civic
      • S2000
    • SUVs/Van
      • CR-V
      • Pilot
      • Odyssey
  • Chrysler
    • Car
      • PT Cruiser
      • Sebring
    • SUVs/Van
      • Town & Country
      • Voyager
 
addListGroup("vehicles", "makers");

addList("makers", "Toyota", "Toyota", "toyota-list");
addList("makers", "Honda", "Honda", "honda-list");
addList("makers", "Chrysler", "Chrysler", "chrysler-list");

addList("toyota-list", "Car", "Car", "toyota-car");
addList("toyota-list", "SUVs/Van", "SUVs/Van", "toyota-suv/van");
addList("toyota-list", "Trucks", "Trucks", "toyota-truck");

addList("honda-list", "Car", "Car", "honda-car");
addList("honda-list", "SUVs/Van", "SUVs/Van", "honda-suv/van");

addList("chrysler-list", "Car", "Car", "chrysler-car");
addList("chrysler-list", "SUVs/Van", "SUVs/Van", "chrysler-suv/van");

addOption("toyota-car", "Avalon", "Avalon");
addOption("toyota-car", "Camry", "Camry");
addOption("toyota-car", "Celica", "Celica");
addOption("toyota-car", "Corolla", "Corolla");

addOption("toyota-suv/van", "4Runner", "4Runner");
addOption("toyota-suv/van", "Highlander", "Highlander");
addOption("toyota-suv/van", "Land Cruiser", "Land Cruiser");
addOption("toyota-suv/van", "Sienna", "Sienna");

addOption("toyota-truck", "Tacoma", "Tacoma");
addOption("toyota-truck", "Tundra", "Tundra");

addOption("honda-car", "Accord", "Accord");
addOption("honda-car", "Civic", "Civic");
addOption("honda-car", "S2000", "S2000");

addOption("honda-suv/van", "CR-V", "CR-V");
addOption("honda-suv/van", "Pilot", "Pilot");
addOption("honda-suv/van", "Odyssey", "Odyssey");

addOption("chrysler-car", "PT Cruiser", "PT Cruiser");
addOption("chrysler-car", "Sebring", "Sebring");

addOption("chrysler-suv/van", "Town & Country", "Town & Country");
addOption("chrysler-suv/van", "Voyager", "Voyager");

There is no default options defined in the list group.

Let's say we save this list group as "content.js" and we want to pick [ Honda ] >> [ SUVs/Van ] >> [ Odyssey ] as the default options for a page. We can then set up the page like this:

<head>
<script language="javascript" src="chainedselects.js"></script>
<script language="javascript" src="content.js"></script>
<script language="javascript">
selectOptions("vehicles", "Honda::SUVs/Van::Odyssey", 0);
</script>
</head>

<body onload="initListGroup('vehicles', ...);">
...

In this example, the selectOptions() call first looks for an option with "Honda" as the display text in the top-list of "vehicles" list group, make it a default option, then looks for "SUVs/Van" in the sub-list of "Honda", make it default and looks for "Odyssey" in the sub-list of "SUVs/Van" and make it default.

Take a look at these two demos: [ Demo 1 ], [ Demo 2 ]. They use the same "content.js" but different selectOptions() calls to define their own default options.

The selectOptions() call let us "travel" down the list group and make the options we "pass by" as default options. Chances are we might not want to set each option we "pass by" as default option. For example, we might only want to set the "SUVs/Van" >> "Odyssey" as default options for "Honda" when it's picked from the top-list but not "Honda" itself as a default option in the top-list. To do so, we can call the selectOptions() like this:

selectOptions("vehicles", "Honda:-:SUVs/Van::Odyssey", 0);

Click [ here ] to see the demo page.

Note: The selectOptions() call actually overwrites the default parameters defined in addList() and addOption() calls.

Note: The last parameter in the selectOptions() call could be: 0 (the option text is compared to the given option "path"), 1 (the optinon value is compared) or 2 (the option index is compared).

[ Share a list group on the same page ] [ Back to main page ]

# # #