<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script LANGUAGE="javascript">
<!--
//A set of data used for testing
//Level 1 drop-down menu data
var opt = "Shanghai,01;Jiangxi,02";
//Level 2 drop-down menu data
var subopt = "01, Xuhui District, 001;01, Jiading District, 002;01, Huangpu District, 003;02, Nanchang City, 004;02, Jiujiang City, 005;02, Shangrao City, 006";
//Level 3 drop-down menu data
var subsubopt = "001, Xuhui District 1, 0001;002, Jiading District 1, 0002;003, Huangpu District 1, 0003;004, Nanchang City 1, 0004;005, Jiujiang City 1, 0005;006, Shangrao City 1, 0006";
/**
* get Element By Id or name.
* Return this object according to the name of a dom object, omitting you
* The direct operation process.
*
* Example: $('The name of the default text box').value
*
*/
function $() {
var elements = new Array();
for (var i = 0; i < ; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = (element);
if ( == 1)
return element;
(element);
}
return elements;
}
/*
* Automatically fill a drop-down list, generally used to fill the first item of the connected menu
*
* selname :: Current drop-down option (this)
*
*
*
*
* seldata:: Data source, data items of the menu (sub-drop-down option name, sub-drop-down option value, sub-drop-down option filter value)
* filter :: Filter conditions for pull-down options
*
*/
function fillselect(selname,seldata,filters) {
var sel = $(selname);
var data = (";");
var filtersdata = (";");
var index = "";
var selkey = "";
var selvalue = "";
if( > 0) {
//The filter condition is 'all', display all, used for the connected menu
if(filtersdata[0] == 'all') {
[0]= new Option('==View all==','all');
for(i=0; i < ; i++) {
selkey = data[i].split(",")[1];
selvalue = data[i].split(",")[2];
[] = new Option(selkey,selvalue);
}
return;
}
[0] = new Option('==View all==','all');
for(i=0;i < ; i++) {
// Pull-down items with filtering conditions (continuous menu data format)
if (data[i].split(",").length == 3) {
for(j=0; j < ; j++){
if( (data[i].split(",")[0] == filtersdata[j]) ) {
selkey = data[i].split(",")[1];
selvalue = data[i].split(",")[2];
[] = new Option(selkey,selvalue);
}
}
}
// Pull-down items without filtering conditions (non-connected menu data format)
if (data[i].split(",").length == 2) {
selkey = data[i].split(",")[0];
selvalue = data[i].split(",")[1];
[] = new Option(selkey,selvalue);
}
}
if ( == 1) {
[0] = new Option('==No option==','');
}else{
}
}
}
/*
* The driver function of the continuous drop-down list
*
* selname_src :: Current drop-down option (this)
*
* subselname_src :: The name of the sub-drop-down option to be driven (name structure is: name_suffix or name)
*
*
*
*
* subseldata_src :: Data source, data item of the driven menu.
*
*
*/
function driverselect(selname_src,subselname_src,subseldata_src) {
var index = "", selkey = "", selvalue = "";
var selName="", selSuffix="";
var subselName="", subselSuffix="";
if(selname_src.("_").length==2) {
selName=selname_src.("_")[0];
selSuffix="_" + selname_src.("_")[1];
}else{
selName=selname_src.name;
}
if(subselname_src.split("_").length==2) {
subselName=subselname_src.split("_")[0];
subselSuffix="_" + subselname_src.split("_")[1];
}else{
subselName=subselname_src;
}
var source = $(selName+selSuffix);
var target = $(subselName+subselSuffix);
=1;
var filters = "";
for(j=0; j < ; j++) {
if(source[j].selected){
filters = filters + source[j].value + ';';
}
}
fillselect(target,subseldata_src,filters);
}
//-->
</script>
</head>
<body>
<form name="myform" method="post">
sample1:
<select name="sel_1" onChange="driverselect(this,'subsel_1',subopt)">
<option selected value="all">==View all==</option>
</select>
<select name="subsel_1" onChange="driverselect(this,'subsubsel_1',subsubopt)">
<option selected value="all">==View all==</option>
</select>
<select name="subsubsel_1">
<option selected value="all">==View all==</option>
</select>
<br><br>
sample2:
<select name="sel_2" onChange="driverselect(this,'subsel_2',subopt)">
<option selected value="all">==View all==</option>
</select>
<select name="subsel_2" onChange="driverselect(this,'subsubsel_2',subsubopt)">
<option selected value="all">==View all==</option>
</select>
<select name="subsubsel_2">
<option selected value="all">==View all==</option>
</select>
<br><br>
sample3:
<select name="selM_1" MULTIPLE size="5" onChange="driverselect(this,'subselM_1',subopt)" >
<option selected value="all">==View all==</option>
</select>
<select name="subselM_1" MULTIPLE size="5" onChange="driverselect(this,'subsubselM_1',subsubopt)">
<option selected value="all">==View all==</option>
</select>
<select name="subsubselM_1" MULTIPLE size="5">
<option selected value="all">==View all==</option>
</select>
<br><br>
sample4:
<select name="selM_2" MULTIPLE size="5" onChange="driverselect(this,'subselM_2',subopt)">
<option selected value="">==View all==</option>
</select>
<select name="subselM_2" MULTIPLE size="5" onChange="driverselect(this,'subsubselM_2',subsubopt)">
<option selected value="">==View all==</option>
</select>
<select name="subsubselM_2" MULTIPLE size="5">
<option selected value="">==View all==</option>
</select>
<br><br>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Initialize sample1: the first drop-down menu item
fillselect('sel_1',opt,'');
//Initialize sample2: The first drop-down menu item
fillselect('sel_2',opt,'');
//Initialize sample3: the first drop-down menu item
fillselect('selM_1',opt,'');
//Initialize sample4: The first drop-down menu item
fillselect('selM_2',opt,'');
//-->
</SCRIPT>
</body>
</html>