用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 相关文章推荐
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
vue调用语音播放的方法
Sep 27 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
JQuery UI皮肤定制
2009/07/27 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
python实现ip查询示例
2014/03/26 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python实现直播推流效果
2019/11/26 Python
python多进程重复加载的解决方式
2019/12/13 Python
Python3实现飞机大战游戏
2020/04/24 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
毕业生自我推荐
2013/11/04 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
党员带头倡议书
2015/04/29 职场文书
辩护词范文大全
2015/05/21 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP
MySQL三种方式实现递归查询
2022/04/18 MySQL
python 闭包函数详细介绍
2022/04/19 Python