基于Mootools的联动SELECT菜单
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');
}
});