Chained Selects Examples: Loading Sub-list Content On-the-fly

If we have a very large list content that might take a while to finishing loading, we can split it into couple small list contents to improve the performance.

When an option with a sub-list is picked from a select list, CS looks at the corresponding addList() call for the definition of the sub-list, for example:

addListGroup("vehicles", "car-makers");

addList("car-makers", "Honda", "Honda", "Honda-sub");

addOption("Honda-sub", "--- Honda vehicles ---", "");
addList("Honda-sub", "Cars", "car", "Honda-Cars");
addList("Honda-sub", "SUVs/Van", "suv", "Honda-SUVs/Van", 1);
...

When "Honda" is picked from the select list, CS looks at the definition of "Honda-sub" for the content of its sub-list.

If the definition of a sub-list is not found, CS thinks that the sub-list name will refer to the URL of the sub-list content and tries to load that URL, for example, if we have:

addListGroup("vehicles", "car-makers");

addList("car-makers", "Honda", "Honda", "Honda-sub.html");
...

and the definition of the sub-list named "Honda-sub.html" is not found, CS will load the "Honda-sub.html" page for the content of the sub-list. Thus we can actually separate the sub-list content of "Honda" from the main list content of "vehicles".

To define the sub-list content in a separated file, we need to use the sub-list name as the name for a list group, for example:

addListGroup("Honda-sub.html", "Honda-sub");

addOption("Honda-sub", "--- Honda vehicles ---", "");
addList("Honda-sub", "Cars", "car", "Honda-Cars");
addList("Honda-sub", "SUVs/Van", "suv", "Honda-SUVs/Van", 1);
...

updateSubList("vehicles", "Honda-sub.html");

The updateSubList() call tells CS that this "Honda-sub.html" list group is actually the content for the sub-list of "Honda-sub.html" in the list group of "vehicles".

Let's say we save this "Honda-sub.html" list group as "honda.js", then to set up the "Honda-sub.html" page, we would have:

<html>

<head>
<script language="javascript" src="cscontrol.js"></script>
<script language="javascript" src="honda.js"></script>
</head>

<body><p>&nbsp;</p></body>

</html>

CS creates an iframe to load the separated sub-list page for the first time access to the sub-list, and deletes the iframe afterwards, thus only iframe-enabled browsers will support this feature.

The "cscontrol.js" is the control script that sends the list group content from the iframe to the parent page. The sub-list page can just leave the html body blank as the iframe is invisible.

If a separated sub-list content is still too large, we can split it again in the same way into even smaller sub-list contents.

Click [ here ] to see the demo page.

[ Back to main page ]

# # #