DynamicOptionList连动菜单代码

2024-07-29 11:33:05

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

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:

sample2:

sample3:

sample4:

</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>

List

0) {

//过滤条件为'all',显示全部,用于连动菜单
if(filtersdata[0] == 'all') {
sel.options[0] = new Option('==查看所有==','all');

for(i=0; i

sample1:

==查看所有==

sample2:

==查看所有==

sample3:

==查看所有==

sample4:

==查看所有==

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

DynamicOptionList连动菜单代码

使用前请看一下说明,不会耽误你多少时间,明白以后有助你快速实现这个小功能,实际上非常简单,与你使用的开发语言也没有什么关系: 1. <option selected value="all">==查看所有==</option> 这个下拉项可以保留或忽略,内容如"==查看所有=="可替换为自己需要的内容,value="all" 属性可以获得一个附加的全过滤显示功能,建议保留:) 2.下拉菜单数据格式,(实际开发可以由后台程序
JS多级连动菜单

JS联动下拉框 /* ** ================================================================================================== ** 类名:CLASS_LIANDONG_YAO ** 功能:多级连动菜单 ** ** 作者:YAODAYIZI ** =============================================================================
基于递归实现的php树形菜单代码

本文实例讲述了基于递归实现的php树形菜单代码.分享给大家供大家参考.具体实现方法如下: 开发电子商务网站的时候,做了这个显示树形菜单的功能,用的递归实现的PHP树形菜单函数.具体代码如下: 复制代码代码如下: public function procCategory($sid,$pid){ $return = array(); $key = 0; static $arr = array(); //分类级别参考数组 $sql = "select cid,pcid,name from shop
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码

本文实例讲述了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的鼠标悬停背景翻转的黑色导航菜单菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-bg-cha-black-nav-menu/ 具体代码如下: <!DOCTYPE html
js实现的后台左侧管理菜单代码

本文实例讲述了js实现的后台左侧管理菜单代码.分享给大家供大家参考.具体如下: 这是一个完美的后台左侧管理菜单,从样式来说,貌似出自专业人士之手,风格清新,操作实用,用在WEB管理系统中或用在网站后台管理中,最恰当不过了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-main-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tra
JS实现Fisheye效果动感放大菜单代码

本文实例讲述了JS实现Fisheye效果动感放大菜单代码.分享给大家供大家参考,具体如下: 这款Fisheye Menu,是采用JS+CSS+XHTML实现的动感放大菜单,放到图标上的时候,图标会被放大,整个菜单有缓冲弹簧的效果,学jQuery的朋友见的比较多,不过本款没有用到jQuery,效果却同样精彩. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fisheye-style-menu-demo/ 具体代码如下: <!DOCTYPE
js实现具有高亮显示效果的多级菜单代码

本文实例讲述了js实现具有高亮显示效果的多级菜单代码.分享给大家供大家参考.具体如下: 这是一款具有高亮效果的菜单,菜单设计的也比较简洁,鼠标放在一级菜单上可以看到二级菜单的高亮效果,整体风格简约大方,适用于一些比较"干净"没有过多修饰的网站. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-blink-show-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-/
JS实现带圆弧背景渐变效果的导航菜单代码

本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码.分享给大家供大家参考.具体如下: 这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用JavaScript控制了背景的移动,用jQuery实现过类似的功能,整体感觉很不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-cicle-cha-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC
JS实现的竖向折叠菜单代码

本文实例讲述了JS实现的竖向折叠菜单代码.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hxzd-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q
JS实现带有3D立体感的银灰色竖排折叠菜单代码

本文实例讲述了JS实现带有3D立体感的银灰色竖排折叠菜单代码.分享给大家供大家参考,具体如下: 这是一款超酷的可以用到网页左侧的银灰色竖排多级折叠菜单,可以自己为菜单加一个背景,CSS中预留有代码,这是比较标准和经典的一款后台管理模式的菜单,Div+Css结构,符合标准,修改方便,挺不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-left-yhs-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

DynamicOptionList连动菜单代码

相关推荐

随机推荐