首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

,如何把下面的三级连动改为四级的

2012-03-27 
求助,怎么把下面的三级连动改为四级的?HTML codehtml head titleList/title meta http-equivCo

求助,怎么把下面的三级连动改为四级的?

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>  



[解决办法]
加一个项
js中 var subsubsubopt....
html中
<select name="subsubsel_1">这个里加上onChange="driverselect(this,'subsubsubsel_1',subsubsubopt)">

然后再加上
<select name="subsubsubsel_1">
 <option></option>
</select>

齐活

热点排行