用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 国际象棋棋盘 实现代码
Jun 26 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
详解AngularJS2 Http服务
Jun 26 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
原生js实现购物车
Sep 23 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
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php文件下载处理方法分析
2015/04/22 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
python中lambda与def用法对比实例分析
2015/04/30 Python
Python二分法搜索算法实例分析
2015/05/11 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python iter()函数用法实例分析
2018/03/17 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
学校督导评估方案
2014/06/10 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
小学感恩主题班会
2015/08/12 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
Python学习之时间包使用教程详解
2022/03/21 Python
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android