基于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');
    }

});

发表评论

电子邮件地址不会被公开。

*