用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 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
javascript操作表格排序实例分析
May 06 Javascript
jquery 手势密码插件
Mar 17 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP单例模式详细介绍
2015/07/01 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
Smarty模板语法详解
2019/07/20 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python模拟百度登录实例详解
2016/01/20 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
基于Python的OCR实现示例
2020/04/03 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
罗技美国官网:Logitech美国
2020/01/22 全球购物
应聘教师自荐信
2013/10/12 职场文书
大学生自荐信
2013/12/11 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
贪污检举信范文
2015/03/02 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
python单向链表实例详解
2022/05/25 Python