用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 相关文章推荐
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
JavaScript实现雪花飘落效果
Dec 27 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 Class 文章
2007/04/04 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
python如何输出反斜杠
2020/06/18 Python
Pandas的Apply函数具体使用
2020/07/21 Python
python Zmail模块简介与使用示例
2020/12/19 Python
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
车间工艺员岗位职责
2013/12/09 职场文书
店长职务说明书
2014/02/04 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
统计学教授推荐信
2014/09/18 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
前台岗位职责
2015/02/13 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
欢迎新生标语2015
2015/07/16 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
php中pcntl_fork详解
2021/04/01 PHP
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang