jquery双列选择插件

自己写的双列表选择器插件（ui设计功能需要双列表展示，后来展现方式变了，插件也没用。功能写的比较简单，做个参考）。

插件依赖jquery。

js：

(function ($, window, document, undefined) {
    //定义pickList的构造函数
    var PickList = function (ele, opt) {
        this.$element = ele,
            this.defaults = {
                data: [],
                selectData: []
            },
            this.options = $.extend({}, this.defaults, opt)
    }
    //定义pickList的方法
    PickList.prototype = {
        //绑定选项双击事件
        bindEvent: function () {
            var _this = this;
            this.$element.find(".picklist-left .pick-left-item").unbind('dblclick').dblclick(function () {
                _this.leftItemHandle($(this), { id: $(this).attr('dataid'), text: $(this).html() });
            })
            this.$element.find(".picklist-right .pick-right-item").unbind('dblclick').dblclick(function () {
                _this.rightItemHandle($(this), { id: $(this).attr('dataid'), text: $(this).html() });
            })
            return this;
        },
        //左边选项双击后回调
        leftItemHandle: function (el, item) {
            el.remove();
            if (this.$element.find(".pick-right-item[dataid='" + item.id + "']").length == 0) {
                this.$element.find('.picklist-right').prepend('<li class="pick-right-item" dataid="' + item.id + '">' + item.text + '</li>').css({ "display": "inherit" });
                this.bindEvent();
            }
        },
        //右边选项双击后回调
        rightItemHandle: function (el, item) {
            el.remove();
            if (this.$element.find(".pick-left-item[dataid='" + item.id + "']").length == 0) {
                this.$element.find('.picklist-left').prepend('<li class="pick-left-item" dataid="' + item.id + '">' + item.text + '</li>').css({ "display": "inherit" });
                this.bindEvent();
            }

        },
        //初始化方法，生成dom，绑定事件
        init: function () {
            var _this = this;
            //this.$element.wrap("<div class='pick-content'></div>")
            this.$element.addClass('pickList');
            var options = this.options;
            var pickLeftHtml = '<ul class="picklist-left">';
            if (this.options.data.length != 0) {
                $.each(this.options.data, function (index, item) {
                    if (_this.checkIsSelect(item.id)) {
                        pickLeftHtml += '<li class="pick-left-item" dataid="' + item.id + '">' + item.text + '</li>';
                    }

                });
            }
            pickLeftHtml += '</ul>';
            this.$element.append(pickLeftHtml);

            var pickRightHtml = '<ul class="picklist-right">';
            if (this.options.selectData.length != 0) {
                $.each(this.options.selectData, function (index, item) {
                    pickRightHtml += '<li class="pick-right-item" dataid="' + item.id + '">' + item.text + '</li>';
                });
            }
            pickRightHtml += '</ul>';
            this.$element.append(pickRightHtml);
            return this.bindEvent();
        },
        //检测左侧需要渲染的数据是否在右侧需要初始化显示。
        checkIsSelect: function (id) {
            $.each(this.options.selectData, function (index, item) {
                if (item.id == id) {
                    return true;
                }
            });
            return false;
        },
        //获取选中的数据，对外接口。
        getSelectValues: function () {
            var arr = [];
            this.$element.find('.pick-right-item').each(function (index, item) {
                var obj = { id: '', text: '' }
                obj.id = $(this).attr('dataid');
                obj.text = $(this).html();
                arr.push(obj);
            })
            return arr;
        }
    }
    //在插件中使用pickList对象
    $.fn.pickList = function (options) {
        //创建pickList的实体
        var pickList = new PickList(this, options);
        //调用其方法
        return pickList.init();
    }
})(jQuery, window, document);

css:

.pick-content{

padding: 10px;

border: 1px solid #f1f1f1;

border-radius: 5px;

display: inline-block;

height: 60px;

overflow: hidden;

position: relative;

}

.pickList{

width: 210px;

font-size: 12px;

color: #666;

border: 1px solid #f1f1f1;

border-radius: 5px;

display: inline-block;

min-height: 60px;

overflow: hidden;

position: relative;

}

.picklist-left,.picklist-right{

height: 100%;

overflow-y: scroll;

padding: 10px;

}

.picklist-left{

left: 0;

position: absolute;

display: inline-block;

width: 50%;

box-sizing: border-box;

border-right: 1px solid #f1f1f1;

padding-right: 10px;

overflow-y: scroll;

}

.picklist-right{

right: 0;

position: absolute;

display: inline-block;

width: 50%;

box-sizing: border-box;

border-right: 1px solid #f1f1f1;

padding-right: 10px;

overflow-y: scroll;

}

.pick-left-item:hover,.pick-right-item:hover{

background: #f1f1f1;

}

使用：

$(select).pickList({

    data:[{id:1,text:'测试一'},

        {id:2,text:'测试二'},

        {id:3,text:'测试三'},

        {id:4,text:'测试四'}],

    selectData:[{id:11,text:'待选一'}]

})