用prototype实现的简单小巧的多级联动菜单


Posted in Javascript onMarch 24, 2007

使用prototype.js这个js库,这个在网上一搜就能找到了,是一个开源的js函数库。 
看到今天贴了几个联动菜单的帖子
这个应该大家都有各自比较好的代码了
我也顺手贴一个我们team里面用的比较小巧的代码

// author: downpour   
var DoubleCombo = Class.create();   
DoubleCombo.prototype = {   
  initialize: function(source, target, ignore, url, options, excute) {   
    this.source = $(source);   
    this.target = $(target);   
    this.ignore = $A(ignore);   
    this.url = url;   
    this.options = $H(options);   
    this.source.onchange = this.doChange.bindAsEventListener(this);   
    if(excute) {   
        this.doChange();   
    }   
  },   
  doChange: function() {   
    if(this.source.value != '') {   
        // first clear the ignore ones   
        this.ignore.each(   
            function(value) {   
                $(value).options.length = 1;   
                $(value).options[0].selected = 'selected';   
            }   
        );   
        // create parameter for ajax   
        var query = $H({ id: this.source.value });   
        var parameters = {   
            method: 'post',    
            parameters: $H(this.options).merge(query).toQueryString(),    
            onComplete: this.getResponse.bindAsEventListener(this)   
        }   
        var locationRequest = new Ajax.Request( this.url, parameters );   
    }   
  },   
  getResponse: function(request) {   
    this.target.options.length = 1;   
    this.target.options[0].selected = 'selected';   
    var response = $A(request.responseText.trim().split(';'));   
    response.length--;   
    for(var i = 0; i < response.length; i++) {   
        var optionParam = response[i].split(',');   
        this.target.options[this.target.options.length] = new Option(optionParam[1], optionParam[0]);   
    }   
  }   
}  
简单说一下几个参数吧: 
source 第一级菜单
target 联动菜单
ignore 当有时候3级联动时,例如 国家 省 市 例如上海没有省的,可以忽略第3级菜单
url action url
options action参数
excute 是否联动
拿比较常见的例子来看 国家 省 市 3级联动来作为例子
代码
<html-el:select property="country" styleId="country" >  
    <html-el:options collection="countries" property="id" labelProperty="name" />  
</html-el:select>  
<html-el:select property="province" styleId="province">  
    <option value="">--Please Select--</option>  
         ................   
</html-el:select>  
<html-el:select property="city" styleId="city">  
    <option value="">--Please Select--</option>  
         ................   
</html-el:select>  
<script type="text/javascript">  
    new DoubleCombo('country', 'province', null, '<c:url value="/xxxx.do?combo=true"></c:url>', {});   
<script type="text/javascript">  
    new DoubleCombo('province', 'city', null, '<c:url value="/xxxx.do?combo=true"></c:url>', {}); 

Javascript 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
javascript History对象原理解析
Feb 17 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
this[] 指的是什么内容 讨论
Mar 24 #Javascript
javascript对象的property和prototype是这样一种关系
Mar 24 #Javascript
Ajax一统天下之Dojo整合篇
Mar 24 #Javascript
dojo 之基础篇(三)之向服务器发送数据
Mar 24 #Javascript
dojo 之基础篇(二)之从服务器读取数据
Mar 24 #Javascript
dojo 之基础篇
Mar 24 #Javascript
jQuery使用手册之 事件处理
Mar 24 #Javascript
You might like
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
Python中的自定义函数学习笔记
2014/09/23 Python
Python线程中对join方法的运用的教程
2015/04/09 Python
详细探究Python中的字典容器
2015/04/14 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
教育学专业实习生的自我鉴定
2013/11/26 职场文书
会计自荐书
2013/12/02 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
黄河象教学反思
2014/02/10 职场文书
对教师的评语
2014/04/28 职场文书
机关保密承诺书
2014/06/03 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
《去年的树》教学反思
2016/02/18 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python