用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 相关文章推荐
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
详解Node.JS模块 process
Aug 31 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
微信小程序实现文件预览
Oct 22 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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之第一天
2006/10/09 PHP
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
python os.path模块常用方法实例详解
2018/09/16 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
学院领导推荐信
2013/10/30 职场文书
兴趣小组活动总结
2014/05/05 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
小学语文复习计划
2015/01/19 职场文书
行政文员岗位职责
2015/02/04 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Python中else的三种使用场景
2021/06/16 Python
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python