使用前请看一下说明，不会耽误你多少时间，明白以后有助你快速实现这个小功能，实际上非常简单，与你使用的开发语言也没有什么关系：
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>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
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>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“DynamicOptionList连动菜单代码”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。