Mootools

基于Mootools的联动SELECT菜单

时间:2015-06-11 17:30来源:网络整理 作者:KKWL 点击:
Mootools很好很强大.如果你能熟练运用Mootools来开发JAVASCRIPT代码,你将会体会到什么叫做强大,高效,健壮,跨浏览器,最重要的是快捷. Mootools自带的事件功能,虽然只短短几行代码,却带来了编

Mootools很好很强大.如果你能熟练运用Mootools来开发JAVASCRIPT代码,你将会体会到什么叫做强大,高效,健壮,跨浏览器,最重要的是快捷. Mootools自带的事件功能,虽然只短短几行代码,却带来了编程方法新的跨越. 以下是基于Mootools的联动SELECT菜单的源代码.

//联合菜单,AJAX方式实现 var Combine = new Class({ Implements : [Events], //下拉菜单 elements : null, //生成send的参数,接收当前select对象 paramHandle : null, //json中文本的属性名称 textField : 'name', //值的属性名称 valueField : 'id', //始终显示的选项数,用于默认有个空值等 allwaysShow : 1, //空行的值 blackValue : '', request : null, initialize : function(options){ $extend(this, options); this.addEventsForElements(); this.initRequest(); this.next = $(this.elements[0]); this.request.send(this.paramHandle()); }, initRequest : function(){ var _this = this; this.request = new Request.JSON({ method : 'get', link : 'ignore', onSuccess : function(data){ _this.createOptions(_this.next, data); } }); }, addEventsForElements : function(){ var _this = this; this.elements.each(function(e, i, elements){ if(i >= elements.length - 1) return; $(e).addEvent("change", function(){ //重置下一个 _this.createOptions($(elements[i+1])); //有数据的时候,再提交请求 var show = $pick(this.getAttribute("allwaysShow"), _this.allwaysShow); if(this.options.length >= show && this.selectedIndex >= show){ _this.next = $(elements[i+1]); _this.request.send(_this.paramHandle($(e))); } }); }); }, createOptions : function(e, data){ var options = e.options; var _this = this; options.length = $pick(e.getAttribute("allwaysShow"), this.allwaysShow); e.fireEvent("change"); if($type(data) != 'array') return; data.each(function(row){ var o = new Option(row[_this.textField], row[_this.valueField]); options.add(o); //默认值 if($defined(e.getAttribute("defaultValue"))){ if(row[_this.valueField] == e.getAttribute("defaultValue")){ o.selected = true; e.fireEvent("change"); } } }); e.removeAttribute('defaultValue'); } }); 以下文章可能也对您有所帮助

------分隔线----------------------------