DynamicOptionList连动菜单代码

DarwinNewman · 发布于 2017-01-11 · 字数16446 · 浏览 715 · 评论 0

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

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需刷新才能执行]

本文系作者 DarwinNewman 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2014-09-01浅谈情感化设计
  • 2016-07-15十分钟搞清字符集和字符编码
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-04-19在Photoshop中创建逼真泼水文字效果
  • 2016-06-30ESLint开源的JavaScript和JSX验证工具
  • 2016-07-05环境搭建:php7.0.8 + Apache2.4 + MySQL5.7.13 + phpMyAdmin4.6.3
  • 2016-07-12phpStudy让天下没有难配的PHP环境
  • 2016-07-12分享几款唯美的中文字体
  • 发布评论

    为您推荐

    Apache使用Rewrite模块伪静态语法格式
    问说网 · 发布于 2015-06-28

    Apache使用Rewrite模块伪静态语法格式

    无论是对于搜索引擎还是对于访客而言,很多网站程序生成的URL并不友好,所以需要将URL以更简短的方式来重写。这种技术可以解决很多常见的问题,如:页面伪静态,域名…

    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    问说网 · 发布于 2016-03-07

    Windows中解决端口被占用问题

    我们在启动应用的时候发现系统需要的端口被别的程序占用,特别是在打开IIS服务器的时候,莫名其妙的就被占用了端口,让我们不知所措,如何知道谁占有了我们需要的端口?

    问说网 · 发布于 2016-12-02

    Response JS创建高性能的支持移动设备的网站

    Response JS 是一个轻量级的 jQuery 插件,用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的设备环境动态替换HTML代码。例如…

    这效果超酷!快速搞定多边形风格设计

    最近,设计达人网又发现了新的设计趋势——多边形风格,什么是多边形风格呢?其实它有点像折纸风格一样,下面我们为大家介绍一个制作多边形图像的网页工具,使用方法很简单…

    • 这效果超酷!快速搞定多边形风格设计
    • 这效果超酷!快速搞定多边形风格设计
    • 这效果超酷!快速搞定多边形风格设计
    • 这效果超酷!快速搞定多边形风格设计
    BloomerAnna · 发布于 2016-05-15 · 浏览 1054 · 评论 0

    APP掀起的热潮!5项启迪性的移动APP设计趋势

    App Store和Google Play里的app多如牛毛。很难说未来的趋势是什么,不过我们可以轻易选出当下的5种趋势并加以分析,学习优秀app中的颜色和创意…

    • APP掀起的热潮!5项启迪性的移动APP设计趋势
    • APP掀起的热潮!5项启迪性的移动APP设计趋势
    • APP掀起的热潮!5项启迪性的移动APP设计趋势
    • APP掀起的热潮!5项启迪性的移动APP设计趋势
    WashingtonAdolph · 发布于 2016-05-16 · 浏览 990 · 评论 0

    打动人心的设计!产品细节中的情感化设计

    今天我们一起来学习欣赏那些细节里特别打动人的产品设计,一个优秀的产品应该是有人格魅力且让人愉悦的,这种让人愉悦的积极的情绪便是由产品中那些多多少少的情感化细节来…

    • 打动人心的设计!产品细节中的情感化设计
    • 打动人心的设计!产品细节中的情感化设计
    • 打动人心的设计!产品细节中的情感化设计
    • 打动人心的设计!产品细节中的情感化设计
    BarrettUpton · 发布于 2016-05-16 · 浏览 1007 · 评论 0
    问说网 · 发布于 2016-06-06

    PHP求异形多维数组的平均值

    在php中,求一个多维异形多维数组常见的方法就是递归,如同以下代码,将上面的函数再放到另一个函数内,利用这个函数每次重置$sum和$count。这样一来,函数就…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    DarwinNewman

    这个人比较懒,什么都没有填写!

    96 文章
    0 评论
    1385 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1930

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1848

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1867

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1343

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1555

    更多 推荐作者

    关注 怎麽继续

    文章 90 · 评论 2

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!