用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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
jquery的live使用注意事项
Feb 18 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
stripos函数知识点实例分享
2019/02/11 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
python实现AdaBoost算法的示例
2020/10/03 Python
建筑工程专业毕业生自荐信
2013/10/19 职场文书
单位成立周年感言
2014/01/26 职场文书
化工工艺设计求职信
2014/06/25 职场文书
员工开除通知书
2015/04/25 职场文书
秋菊打官司观后感
2015/06/03 职场文书
《秋思》教学反思
2016/02/23 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js