用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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 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
URL Rewrite的设置方法
2007/01/02 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
JS与框架页的操作代码
2010/01/17 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python Web版语音合成实例详解
2019/07/16 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
制衣厂各岗位职责
2013/12/02 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
鲁冰花观后感
2015/06/10 职场文书
初中班主任工作随笔
2015/08/15 职场文书