DynamicOptionList连动菜单代码_表单特效

使用前请看一下说明，不会耽误你多少时间，明白以后有助你快速实现这个小功能，实际上非常简单，与你使用的开发语言也没有什么关系：


1. ==查看所有==
 这个下拉项可以保留或忽略，内容如“==查看所有==”可替换为自己需要的内容，value="all" 属性可以获得一个附加的全过滤显示功能，建议保留:)

2.下拉菜单数据格式，（实际开发可以由后台程序生成一个数据格式字符串，这个数据串格式和你查询的表结构应该是一样的，传到模板上取得这个数据格式串即可，所有下拉菜单数据是一次传到页面上的，并且与你使用的语言开发实现没有什么关系，只要你想办法得到这个字符串格式就行了）如下：

a.第一级连动菜单的下拉选项，格式为 (下拉选项option内容,下拉选项option值;......)

"上海,01;江西,02";

b. 第二级连动菜单的下拉选项，(子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......)

"01,徐汇区,001;01,嘉定区,002;01,黄浦区,003;02,南昌市,004;02,九江市,005;02,上饶市,006";

c. 第三级连动菜单的下拉选项，(子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......)

"001,徐汇1区,0001;002,嘉定1区,0002;003,黄浦1区,0003;004,南昌1市,0004;005,九江1市,0005;006,上饶1市,0006";
.
.
.
第 N 级连动菜单的下拉选项，(子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......)

除了第一级没有子下拉选项option过滤值这一项外，其他子集都有子下拉选项option过滤值


3.实际可实现N级连动菜单，只要由当前菜单驱动它的子菜单即可，类似与责任链模式；

4.实际开发将

 ... 中的3个方法放至在一个单独的脚本文件里面，并引入它，只要在页面调用方法即可，这样就会发现实现这个功能很简洁，调用的方法也很自然；

5.下文举了4个例子，实际都一样，只是名字和样式不一样而已,名称后缀('_'下划线作为后缀的分隔符)不是必要的；

复制代码 代码如下:

<script> <BR><!-- <BR>//测试用的一组数据 <br><br>//第1级下拉菜单数据 <BR>var opt = "上海,01;江西,02"; <br><br>//第2级下拉菜单数据 <BR>var subopt = "01,徐汇区,001;01,嘉定区,002;01,黄浦区,003;02,南昌市,004;02,九江市,005;02,上饶市,006"; <br><br>//第3级下拉菜单数据 <BR>var subsubopt = "001,徐汇1区,0001;002,嘉定1区,0002;003,黄浦1区,0003;004,南昌1市,0004;005,九江1市,0005;006,上饶1市,0006"; <br><br>/** <BR> * get Element By Id or name. <BR> * 根据一个dom对象的名称返回这个对象，省略了你 <BR> * 直接操作document.getElementById的过程. <BR> * <BR> * 例如: $('默认文本框的名称').value <BR> * 就可以取得它的value <BR> */ <BR>function $() { <BR> var elements = new Array(); <br><br> for (var i = 0; i < arguments.length; i++) { <BR> var element = arguments[i]; <BR> if (typeof element == 'string') <BR> element = document.getElementById(element); <br><br> if (arguments.length == 1) <BR> return element; <br><br> elements.push(element); <BR> } <br><br> return elements; <BR>} <br><br>/* <BR> * 自动填充一个下拉列表,一般用于填充连动菜单的第一项 <BR> * <BR> * selname :: 当前下拉选项(this) <BR> * 后缀是为了区分由程序动态生成的如果有多个相同的下拉选项而设 <BR> * 置的一个辅助名称后缀('_'下划线作为后缀的分隔符),如果没有这 <BR> * 个需要可以忽略 “_后缀”,只要设置一个普通的名称即可. <BR> * <BR> * seldata :: 数据源，菜单的数据项(子下拉选项名称，子下拉选项值，子下拉选项过滤值) <BR> * filter :: 下拉选项的过滤条件 <BR> * <BR> */ <BR>function fillselect(selname,seldata,filters) { <BR> var sel = $(selname); <BR> var data = seldata.split(";"); <BR> var filtersdata = filters.split(";"); <br><br> var index = ""; <BR> var selkey = ""; <BR> var selvalue = ""; <br><br> if(data.length > 0) { <br><br> //过滤条件为'all',显示全部,用于连动菜单 <BR> if(filtersdata[0] == 'all') { <BR> sel.options[0] = new Option('==查看所有==','all'); <br><br> for(i=0; i < data.length; i++) { <BR> selkey = data[i].split(",")[1]; <BR> selvalue = data[i].split(",")[2]; <BR> sel.options[sel.length] = new Option(selkey,selvalue); <BR> } <br><br> return; <BR> } <br><br> sel.options[0] = new Option('==查看所有==','all'); <BR> for(i=0;i < data.length; i++) { <br><br> //有过滤条件的下拉项(连动菜单数据格式) <BR> if (data[i].split(",").length == 3) { <BR> for(j=0; j < filtersdata.length; j++){ <BR> if( (data[i].split(",")[0] == filtersdata[j]) ) { <BR> selkey = data[i].split(",")[1]; <BR> selvalue = data[i].split(",")[2]; <BR> sel.options[sel.length] = new Option(selkey,selvalue); <BR> } <BR> } <BR> } <br><br> //无过滤条件的下拉项(非连动菜单数据格式) <BR> if (data[i].split(",").length == 2) { <BR> selkey = data[i].split(",")[0]; <BR> selvalue = data[i].split(",")[1]; <BR> sel.options[sel.length] = new Option(selkey,selvalue); <BR> } <br><br> } <br><br> if (sel.length == 1) { <BR> sel.options[0] = new Option('==没有选项==',''); <BR> }else{ <br><br> } <BR> } <BR>} <br><br>/* <BR> * 连动下拉列表的驱动函数 <BR> * <BR> * selname_src :: 当前下拉选项(this) <BR> * <BR> * subselname_src :: 所要驱动的子下拉选项的名称（名称结构为: 名称_后缀 或 名称） <BR> * 后缀是为了区分由程序动态生成的如果有多个相同的下拉选项而设 <BR> * 置的一个辅助名称后缀('_'下划线作为后缀的分隔符),如果没有这 <BR> * 个需要可以忽略 “_后缀”,只要设置一个普通的名称即可. <BR> * <BR> * subseldata_src :: 数据源,被驱动菜单的数据项. <BR> * 数据源格式 : (子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......) <BR> * <BR> */ <BR>function driverselect(selname_src,subselname_src,subseldata_src) { <br><br> var index = "", selkey = "", selvalue = ""; <br><br> var selName="", selSuffix=""; <BR> var subselName="", subselSuffix=""; <br><br> if(selname_src.name.split("_").length==2) { <BR> selName=selname_src.name.split("_")[0]; <BR> selSuffix="_" + selname_src.name.split("_")[1]; <BR> }else{ <BR> selName=selname_src.name; <BR> } <br><br> if(subselname_src.split("_").length==2) { <BR> subselName=subselname_src.split("_")[0]; <BR> subselSuffix="_" + subselname_src.split("_")[1]; <BR> }else{ <BR> subselName=subselname_src; <BR> } <br><br> var source = $(selName+selSuffix); <BR> var target = $(subselName+subselSuffix); <BR> target.length=1; <br><br> var filters = ""; <BR> for(j=0; j < source.length; j++) { <BR> if(source[j].selected){ <BR> filters = filters + source[j].value + ';'; <BR> } <BR> } <br><br> fillselect(target,subseldata_src,filters); <BR>} <br><br>//--> <BR></script>

sample1:

    
  ==查看所有==
    
    
  ==查看所有==
    
    
  ==查看所有==
    

 




sample2:

    
  ==查看所有==
    
    
  ==查看所有==
    
    
  ==查看所有==
    

 



 sample3:

    
  ==查看所有==
    
    
  ==查看所有==
    
    
  ==查看所有==
    

 




sample4:

    
  ==查看所有==
    
    
  ==查看所有==
    
    
  ==查看所有==
    

 

<script> <BR><!-- <BR>//初始化sample1:第一个下拉菜单项 <BR>fillselect('sel_1',opt,''); <br><br>//初始化sample2:第一个下拉菜单项 <BR>fillselect('sel_2',opt,''); <br><br>//初始化sample3:第一个下拉菜单项 <BR>fillselect('selM_1',opt,''); <br><br>//初始化sample4:第一个下拉菜单项 <BR>fillselect('selM_2',opt,''); <BR>//--> <BR></script>

<title>List</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript"> <!-- //娴</script>