本站首页    管理页面    写新日志    退出


«September 2023»
日一二三四五六
12
3456789
10111213141516
17181920212223
24252627282930


公告

关注电子政务、大型企业应用开发、Web、Workflow、MOM、MDA、RCP、GEF

email:gmluyang@gmail.com


链接

好友
bluedavy-林昊
刑红瑞
SixSun-翻译
Birt中文指南
SixSun-OpenDoc
Eclipse RCP and Web in action（编写中）

我的分类（专题）

日志更新

最新评论

留言板


Blog信息
blog名称:SixSun的Blog
日志总数:152
评论数量:372
留言数量:13
访问次数:2366653
建立时间:2004年12月13日




[HTML/CSS/Javascript]DynamicOptionList连动菜单
随笔,  心得体会

SixSun 发表于 2006/3/9 23:51:01

    使用前请看一下说明，不会耽误你多少时间，明白以后有助你快速实现这个小功能，实际上非常简单，与你使用的开发语言也没有什么关系：1. <option selected value="all">==查看所有==</option> 这个下拉项可以保留或忽略，内容如“==查看所有==”可替换为自己需要的内容，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.实际开发将<head> ...</head> 中的3个方法放至在一个单独的脚本文件里面，并引入它，只要在页面调用方法即可，这样就会发现实现这个功能很简洁，调用的方法也很自然；5.下文举了4个例子，实际都一样，只是名字和样式不一样而已,名称后缀('_'下划线作为后缀的分隔符)不是必要的；   <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,徐汇1区,0001;002,嘉定1区,0002;003,黄浦1区,0003;004,南昌1市,0004;005,九江1市,0005;006,上饶1市,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>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>  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> 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> </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>  点击测试上述代码演示： <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,徐汇1区,0001;002,嘉定1区,0002;003,黄浦1区,0003;004,南昌1市,0004;005,九江1市,0005;006,上饶1市,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> 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>  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> 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> </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>


阅读全文(10480) | 回复(3) | 编辑 | 精华
 


回复:DynamicOptionList连动菜单
随笔,  心得体会

H(游客)发表评论于2010/4/8 11:01:32

  The Easter Day is approaching, Time Cutting bladeto cheer up and relight the passion in Wow gearsWOW, Wish you alllouis vuitton  good luck when you’re searching the eggs, But wow game cardyou should not misswow game card 2010 xlh 4.8


个人主页 | 引用回复 | 主人回复 | 返回 | 编辑 | 删除
 


回复:DynamicOptionList连动菜单
随笔,  心得体会

H(游客)发表评论于2010/4/8 11:01:04

[url=http://www.ksd.com]ksd[/url]  <a href="http://www.ksd.com">ksd</a> ksd

个人主页 | 引用回复 | 主人回复 | 返回 | 编辑 | 删除
 


回复:DynamicOptionList连动菜单
随笔,  心得体会

h(游客)发表评论于2010/4/8 11:00:26

  The Easter Day is approaching, Time Cutting bladeto cheer up and relight the passion in Wow gearsWOW, Wish you alllouis vuitton  good luck when you’re searching the eggs, But wow game cardyou should not misswow game card 2010 xlh 4.8

个人主页 | 引用回复 | 主人回复 | 返回 | 编辑 | 删除
 


» 1 »

发表评论：
昵称：
密码：
主页：
标题：
验证码：  (不区分大小写,请仔细填写,输错需重写评论内容！)



站点首页 | 联系我们 | 博客注册 | 博客登陆

Sponsored By W3CHINA
W3CHINA Blog 0.8 Processed in 0.051 second(s), page refreshed 144754425 times.
《全国人大常委会关于维护互联网安全的决定》  《计算机信息网络国际联网安全保护管理办法》
苏ICP备05006046号