当前位置: 代码迷 >> JavaScript >> ,如何把下面的三级连动改为四级的
  详细解决方案

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

热度:97   发布时间:2012-03-27 13:44:24.0
求助,怎么把下面的三级连动改为四级的?
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> 


 
  相关解决方案