用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 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
过滤器vue.filters的使用方法实现
Sep 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python json模块使用实例
2015/04/11 Python
详解Python 正则表达式模块
2018/11/05 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
司机的工作范围及职责
2013/11/13 职场文书
个人自荐信
2013/12/05 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
给校长的建议书200字
2014/05/16 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
先进个人材料怎么写
2014/12/30 职场文书
老乡聚会通知
2015/04/23 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
MySQL里面的子查询的基本使用
2021/08/02 MySQL
Golang jwt身份认证
2022/04/20 Golang