用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 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
js操作滚动条事件实例
Jan 29 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 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
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
探讨php中header的用法详解
2013/06/07 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
javascript第一课
2007/02/27 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
jquery使用经验小结
2015/05/20 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
Python collections模块实例讲解
2014/04/07 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
python实现在线翻译
2020/06/18 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
毕业评语大全
2014/05/04 职场文书
促销活动总结怎么写
2014/06/25 职场文书
精神病医院见习报告
2014/11/03 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
MySQL索引失效的典型案例
2021/06/05 MySQL