一行多列的下拉多选框

很简单的一行多列的下拉多选框，就当是学习编写jquery插件的例子，该例子依赖jquery

相关js代码：

/** *  下拉多选插件，支持一行显示过个input框，显示多行 *   by warhorse */(function($){    "use strict";    var SelectCheckBox = function(element, options){        this.$element = $(element);        this.options = $.extend({}, SelectCheckBox.DEFAULTS, options); //使用jQuery.extend 覆盖插件默认参数        // 多选框的名称        if(!this.options.inputName){            this.options.inputName = this.$element.attr("name");            if(!this.options.inputName){                this.options.inputName = this.$element.attr("id");                this.options.inputName = this.options.inputName;            }        }        // 获取并转换list为数组，支持数组类型[{'code':1, 'name':'aa'}]，支持字符串类型："1:aa;2:bb"，支持对象{1:'aa', 2:'bb'}        if(!this.options.list){            this.options.list = this.$element.attr("list");        }        if(this.options.list && !$.isArray(this.options.list)){ // 1:aa;2:bb            var list = [];            var listType = typeof this.options.list;            if(listType === 'string'){                var entries = this.options.list.split(';');                for(var i = 0; entries && i < entries.length; i++){                    var entry = entries[i];                    var values = entry.split(":");                    list.push({'code': values[0], 'name':values[1]});                }            }else if(listType === 'object'){                for(var key in this.options.list){                    list.push({'code': key, 'name':this.options.list[key]});                }            }            //            this.options.list = list;        }        // 获取并转换data，支持数组类型[1,2,3]，支持字符串类型："1,2,3"        if(!this.options.data){            this.options.data = this.$element.attr("data");        }        if(this.options.data && !$.isArray(this.options.data)){            this.options.data = this.options.data.split(',');        }    };    SelectCheckBox.DEFAULTS = {            list: null, // 支持数组类型[{'code':1, 'name':'aa'}]，支持字符串类型："1:aa;2:bb"            data: '', // 支持数组类型[1,2,3]，支持字符串类型："1,2,3"            col: 4, //默认一行4个            formatter: null,            seperator: '，',            noneSelectedText: '请选择',            width: 100,            height: 100,            onchange: null    };    SelectCheckBox.prototype.create = function () {        var opts = this.options;        // li的宽度百分比        var liWidth = 100 / opts.col;         liWidth += '%';        var width = this.$element.attr("width");        if(!width){            width = this.$element.width();        }        var lis = '';        var title = ''; // 选中值对应的文字        for(var i = 0; i < opts.list.length; i++){            var entry = opts.list[i];            var checked = false;            for(var j = 0; opts.data && j < opts.data.length; j++){                if(entry['code'] == opts.data[j]){                    checked = true;                    title += entry['name'] + opts.seperator;                }            }            if(opts.formatter){                var inputHtml = opts.formatter.call(this, entry, checked);                lis += '<li align="left" style="width:'+liWidth+'">'+inputHtml+'</li>';            }else{                var checkedStr = checked ? 'checked="checked"' : '';                lis += '<li align="left" style="width:'+liWidth+'"><label><input type="checkbox" name="'+opts.inputName+'" value="'+entry['code']+'" '+checkedStr+'/>'+entry['name']+'</label></li>';            }        }        if(title){            if(opts.seperator){                title = title.substring(0, title.length - opts.seperator.length);            }        }else{            title = opts.noneSelectedText;        }        // 主要的html代码        var div = '<div class="selectCheckbox" id="scb_'+opts.inputName+'" style="width:100%; height:100%;cursor:pointer;">'                +   '<div class="inputDiv" style="width:'+width+'px;overflow:hidden;">'                +     '<p>'+title+'</p>'                +   '</div>'                +   '<div class="selectDiv" style="position:absolute; width:'+width+'px; display: none;" >'                +     '<ul>'                +        lis                +     '</ul>'                +   '</div>'                +   '</div>';        this.$element.append(div);    };    // 绑定事件    SelectCheckBox.prototype.bindEvent = function(){        var self = this;        var $this = this.$element;        var opts = this.options;        // 绑定事件        var inputDiv = $this.find(".inputDiv");        var selecDiv = $this.find(".selectDiv");        // 点击显示下拉框事件        inputDiv.bind('click', function(){            selecDiv.toggle();        });        // 鼠标离开选择面板隐藏下拉框事件        $this.bind('mouseleave',function(){            selecDiv.hide();        });        // 选择值后将选中的值显示在显示框上的事件        selecDiv.find("input").bind('click',function(){            self.fefresh();        });    };    // 刷新显示    SelectCheckBox.prototype.fefresh = function(){        var self = this;        var opts = this.options;        var $this = this.$element;        var data = [];        var title = '';        $this.find("input:checked").each(function(){            title += $(this).parent("label").text() + opts.seperator;            data.push($(this).val());        });        if(title){            if(opts.seperator){                title = title.substring(0, title.length - opts.seperator.length);            }        }else{            title = opts.noneSelectedText;        }        $this.find(".selectCheckbox").find(".selectDiv").prev(".inputDiv").find("p").text(title);        // 执行回调函数        if(opts.onchange){            opts.onchange.call(self, data.toString());        }        //         opts.data = data;    };    // 全不选    SelectCheckBox.prototype.clear = function(){        this.$element.find("input").attr("checked", false);        this.fefresh();    };    // 全选    SelectCheckBox.prototype.selectAll = function(){        this.$element.find("input").attr("checked", true);        this.fefresh();    };    // 设置选中的值    SelectCheckBox.prototype.setData = function(data){        if(data && !$.isArray(data)){            data = data.split(',');        }        if(data && data.length > 0){            this.$element.find("input").each(function(){                var val = $(this).val();                if($.inArray(val, data) > -1){                    $(this).attr("checked", true);                }            });            //            this.fefresh();        }        return this;    };    // 获取选中的值    SelectCheckBox.prototype.getSelected = function(){        return this.options.data;    };    $.fn.selectCheckBox = function(options){        var $this = $(this);        // 判断是否初始化过的依据        var scb = $this.data('selectCheckBox');        if(!scb){            var opts = typeof options == 'object' && options;            // 初始化并缓存            $this.data('selectCheckBox', (scb = new SelectCheckBox(this, opts)));            // 创建节点            scb.create();            // 绑定事件            scb.bindEvent();        }        // 调用方法        if (typeof options === 'string') {            if(scb){                var fn = scb[options];                if (!fn) {                    throw ("selectCheckBox - No such method: " + options);                }                var args = $.makeArray(arguments).slice(1);                return fn.apply(scb, args);            }        }        return scb;    };})(jQuery);

相关css

.selectCheckbox .inputDiv{    height:20px;     line-height:20px;     padding:2px 5px;     border:1px solid #CFCFCF;     background-color: rgba(255, 255, 255, 1);    background-image: url('${ctx}/resource/images/arrow3_d.png');    background-repeat: no-repeat;    background-position: 99% 50%;}.selectCheckbox .selectDiv{    padding:2px 5px;     border:1px solid #CFCFCF;    background-color: #F8F8F8;     z-index: 1000;    height: auto;    line-height: 31px;}.selectCheckbox li{    list-style-type: none;    float: left;}

调用方式：

• html写法

<div name="outOrgType"></div>

• 调用js写法：

$("div[name='outOrgType']").selectCheckBox({    list: '1:aa;2:bb;3:cc', // 支持数组类型[{'code':1, 'name':'aa'}]，支持字符串类型："1:aa;2:bb"    data: '1,2', // 支持数组类型[1,2,3]，支持字符串类型："1,2,3"    col: 4, //默认一行4个    formatter: null,    seperator: '，', // 标题显示的分隔符    noneSelectedText: '请选择', //没有选项的时候显示的标题    onchange: null // 点击选中项的回调函数});

示例图