用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实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
轻松搞定js表单验证
Oct 13 Javascript
Vue程序调试的方法
Jun 17 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 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 MYSQL中插入当前时间
2008/04/06 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
求网格中的黑点分布
2013/11/06 面试题
SQL Server数据库笔试题和答案
2016/02/04 面试题
自荐信模版
2013/10/24 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
《在家里》教后反思
2014/03/01 职场文书
高中军训感言600字
2014/03/11 职场文书
推普周活动总结
2014/08/28 职场文书
2014年实习期工作总结
2014/11/27 职场文书
开会通知短信大全
2015/04/20 职场文书
个人承诺书格式范文
2015/04/29 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android