- HTML code
<html> <head> <title>List</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script LANGUAGE="javascript"> <!-- //测试用的一组数据 //第1级下拉菜单数据 var opt = "一级分类,01;一级分类,02"; //第2级下拉菜单数据 var subopt = "01,二级分类,001;01,二级分类,002;01,二级分类,003;02,二级分类,004;02,二级分类,005;02,二级分类,006"; //第3级下拉菜单数据 var subsubopt = "001,三级分类,0001;002,三级分类,0002;003,三级分类,0003;004,三级分类,0004;005,三级分类,0005;006,三级分类,0006"; /** * get Element By Id or name. * 根据一个dom对象的名称返回这个对象,省略了你 * 直接操作document.getElementById的过程. * * 例如: $('默认文本框的名称').value * 就可以取得它的value */ function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') element = document.getElementById(element); if (arguments.length == 1) return element; elements.push(element); } return elements; } /* * 自动填充一个下拉列表,一般用于填充连动菜单的第一项 * * selname :: 当前下拉选项(this) * 后缀是为了区分由程序动态生成的如果有多个相同的下拉选项而设 * 置的一个辅助名称后缀('_'下划线作为后缀的分隔符),如果没有这 * 个需要可以忽略 “_后缀”,只要设置一个普通的名称即可. * * seldata :: 数据源,菜单的数据项(子下拉选项名称,子下拉选项值,子下拉选项过滤值) * filter :: 下拉选项的过滤条件 * */ function fillselect(selname,seldata,filters) { var sel = $(selname); var data = seldata.split(";"); var filtersdata = filters.split(";"); var index = ""; var selkey = ""; var selvalue = ""; if(data.length > 0) { //过滤条件为'all',显示全部,用于连动菜单 if(filtersdata[0] == 'all') { sel.options[0] = new Option('==查看所有==','all'); for(i=0; i < data.length; i++) { selkey = data[i].split(",")[1]; selvalue = data[i].split(",")[2]; sel.options[sel.length] = new Option(selkey,selvalue); } return; } sel.options[0] = new Option('==查看所有==','all'); for(i=0;i < data.length; i++) { //有过滤条件的下拉项(连动菜单数据格式) if (data[i].split(",").length == 3) { for(j=0; j < filtersdata.length; j++){ if( (data[i].split(",")[0] == filtersdata[j]) ) { selkey = data[i].split(",")[1]; selvalue = data[i].split(",")[2]; sel.options[sel.length] = new Option(selkey,selvalue); } } } //无过滤条件的下拉项(非连动菜单数据格式) if (data[i].split(",").length == 2) { selkey = data[i].split(",")[0]; selvalue = data[i].split(",")[1]; sel.options[sel.length] = new Option(selkey,selvalue); } } if (sel.length == 1) { sel.options[0] = new Option('==没有选项==',''); }else{ } } } /* * 连动下拉列表的驱动函数 * * selname_src :: 当前下拉选项(this) * * subselname_src :: 所要驱动的子下拉选项的名称(名称结构为: 名称_后缀 或 名称) * 后缀是为了区分由程序动态生成的如果有多个相同的下拉选项而设 * 置的一个辅助名称后缀('_'下划线作为后缀的分隔符),如果没有这 * 个需要可以忽略 “_后缀”,只要设置一个普通的名称即可. * * subseldata_src :: 数据源,被驱动菜单的数据项. * 数据源格式 : (子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......) * */ function driverselect(selname_src,subselname_src,subseldata_src) { var index = "", selkey = "", selvalue = ""; var selName="", selSuffix=""; var subselName="", subselSuffix=""; if(selname_src.name.split("_").length==2) { selName=selname_src.name.split("_")[0]; selSuffix="_" + selname_src.name.split("_")[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); target.length=1; var filters = ""; for(j=0; j < source.length; 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">==查看所有==</option> </select> <select name="subsel_1" onChange="driverselect(this,'subsubsel_1',subsubopt)"> <option selected value="all">==查看所有==</option> </select> <select name="subsubsel_1"> <option selected value="all">==查看所有==</option> </select> <br> <br> <br> <br> sample2: <select name="sel_2" onChange="driverselect(this,'subsel_2',subopt)"> <option selected value="all">==查看所有==</option> </select> <select name="subsel_2" onChange="driverselect(this,'subsubsel_2',subsubopt)"> <option selected value="all">==查看所有==</option> </select> <select name="subsubsel_2"> <option selected value="all">==查看所有==</option> </select> <br> <br> <br> <br> sample3: <select name="selM_1" MULTIPLE size="5" onChange="driverselect(this,'subselM_1',subopt)" > <option selected value="all">==查看所有==</option> </select> <select name="subselM_1" MULTIPLE size="5" onChange="driverselect(this,'subsubselM_1',subsubopt)"> <option selected value="all">==查看所有==</option> </select> <select name="subsubselM_1" MULTIPLE size="5"> <option selected value="all">==查看所有==</option> </select> <br> <br> <br> <br> sample4: <select name="selM_2" MULTIPLE size="5" onChange="driverselect(this,'subselM_2',subopt)"> <option selected value="">==查看所有==</option> </select> <select name="subselM_2" MULTIPLE size="5" onChange="driverselect(this,'subsubselM_2',subsubopt)"> <option selected value="">==查看所有==</option> </select> <select name="subsubselM_2" MULTIPLE size="5"> <option selected value="">==查看所有==</option> </select> <br> <br> <br> </form> <SCRIPT LANGUAGE="JavaScript"> <!-- //初始化sample1:第一个下拉菜单项 fillselect('sel_1',opt,''); //初始化sample2:第一个下拉菜单项 fillselect('sel_2',opt,''); //初始化sample3:第一个下拉菜单项 fillselect('selM_1',opt,''); //初始化sample4:第一个下拉菜单项 fillselect('selM_2',opt,''); //--> </SCRIPT> </body> </html>