用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 相关文章推荐
js 颜色选择器(兼容firefox)
Mar 05 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 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递归统计系统中代码行数
2019/09/19 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
python实现简单神经网络算法
2018/03/10 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python flask安装和命令详解
2019/04/02 Python
ubuntu上安装python的实例方法
2019/09/30 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python 实现集合Set的示例
2020/12/21 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
商务英语求职自荐信范文
2013/12/24 职场文书
化学实验员岗位职责
2013/12/28 职场文书
战友聚会邀请函
2014/01/18 职场文书
和谐社区口号
2014/06/19 职场文书
客房部经理岗位职责
2015/02/02 职场文书
李强感恩观后感
2015/06/17 职场文书
检讨书怎么写?
2019/06/21 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
Python+pyaudio实现音频控制示例详解
2022/07/23 Python