支持单选多选过滤的下拉框插件

先看看效果

直接上代码

js

// 实例.getSelectValue()  获取选中值id
// 实例.getSelectText()  获取选中值text
// 实例.getSelectObj()  获取选中值Obj
// 实例.setDefault([]) 设置默认title值 传入id
// 实例.setDisabled(boolean) 设置是否可点击下拉
(function($, win, doc){
    // 创建下拉列表构造函数
    function Select(ele, opt){
        this.$element = ele;
        this.defaults = {
            isChecked: false,//是否可以多选
            isSearch: false,//是否可以搜索
            isDelete: false,//是否可以删除
            place:'bottom',//位置 默认bottom，可选top
            height:'160',//选择框高度 默认160px
            placeholder:'',//默认title提示
            selected:[],//默认选中值
            getClickSelect:function(list){},//每次点击下拉框的回调
            data:[],//下拉数据
            disabled:false,//是否可点击
            dataField:{//下拉数据字段
                text:'name',
                id:'id'
            }
        }
        this.options = $.extend({}, this.defaults, opt);
    };
    Select.prototype = {
        constructor: Select,
        bindEvent:function(){
            var that = this,
                defaults = this.options,
                $element = this.$element;
            if (defaults.disabled) {
                $element.find('.wui-select-title').css('cursor','no-drop');
            }else{
                $element.find('.wui-select-title').css('cursor','pointer');
            }
            $element.find('.wui-select-title').off('click').on('click',function(){
                if(defaults.disabled){
                    return false;
                }else{
                    $element.find('.wui-select-title').css('cursor','pointer');
                    $element.find('.wui-select-content').stop().slideToggle();
                }
            });
            $('html').click(function(e){
                var tag = false;
                $('.wui-select').each(function(index,item){
                    tag = $.contains(item,e.target);
                    if(!tag){
                        $(item).find('.wui-select-content').stop().slideUp();
                    }
                })
            })
            var stopBubble = function(){//阻止冒泡
                $element.find('.wui-select-content').on('click',function(e){
                    window.event?window.event.cancelBubble = true:e.stopPropagation();
                })
            };
            var placeholder = function(){//placeholder
                if (!$element.find('.wui-select-title').html()){
                    $element.find('.wui-select-title').html('<p>'+defaults.placeholder+'</p>')
                }else{
                    $element.find('.wui-select-title>p').remove();
                }
            }
            placeholder();//初始化先调用一下
            var selectChecked = function(that){//多选title和下拉数据对应
                if($(that).hasClass('active')){//选中并且title上面不存在
                    $element.find('.wui-select-title').append('<span _id='+$(that).attr("_id")+'>'+$(that).find('div').text()+'</span>');
                }else{
                    var that_id = $(that).attr('_id');
                    var titleSpan = $element.find('.wui-select-title span');
                    for (var i = 0; i < titleSpan.length; i++) {
                        if (titleSpan.eq(i).attr('_id') == that_id) {
                            titleSpan.eq(i).remove();
                        }
                    }
                }
            };
            if (defaults.isChecked) {//多选
                stopBubble();
                $element.find('.wui-select-item li').off('click').on('click',function(e){
                    var e = e || window.event;
                    $(this).toggleClass('active');
                    selectChecked(this);
                    if (typeof defaults.getClickSelect == 'function' && e.originalEvent) {//回调
                        defaults.selected = that.getSelectValue();
                        defaults.getClickSelect(defaults.selected,that.getSelectObj(),that);
                    }
                    placeholder(defaults.selected);
                });
            }else{//单选
                $element.find('.wui-select-item li').off('click').on('click',function(e){
                    var e = e || window.event;
                    $(this).toggleClass('active').siblings().removeClass('active');
                    if ($(this).hasClass('active')) {
                        $element.find('.wui-select-title').html('<span _id='+$(this).attr("_id")+'>'+$(this).find('div').text()+'</span>')
                    }else{
                        $element.find('.wui-select-title').html('');
                    }
                    $element.find('.wui-select-content').slideUp();
                    if (typeof defaults.getClickSelect == 'function' && e.originalEvent) {//回调
                        defaults.selected = that.getSelectValue();
                        defaults.getClickSelect(defaults.selected,that.getSelectObj(),that);
                    }
                    placeholder(defaults.selected);
                });
            }

            that.setDefault(defaults.selected);//设置selected
            if (defaults.isSearch) {//搜索
                var timer,
                    flag=true;
                $element.find('.wui-select-search').off('input propertychange').on('input propertychange',function(){
                    searchEle = $element.find('.wui-select-search'),
                    itemLi = $element.find('.wui-select-item li');
                    if(flag){
                        flag = false;
                        timer = setTimeout(function(){
                            var searchVal = searchEle.val();
                            $.each(itemLi,function(index,item){
                                var itemVal = $(item).find('div').text();
                                if (itemVal.indexOf(searchVal) !== -1) {
                                    $(item).show();
                                }else{
                                    $(item).hide();
                                }
                            })
                            flag = true;
                        },timer?200:0)
                    }
                })
            }

            $element.find('.wui-select-item').css('max-height',defaults.height+'px');//高度

            if (defaults.place == "top") {//显示位置
                $element.find('.wui-select-content').addClass('wui-select-top');
            }else{
                $element.find('.wui-select-content').addClass('wui-select-bottom');
            }
            return this;
        },
        getSelectEach:function(type){ //type 0--获取选中id 1--获取选中text 2--获取选中obj
            var that = this;
            var titleSpan = this.$element.find('.wui-select-title span'),
                arr = [],
                obj;
            for (var i = 0; i < titleSpan.length; i++) {
                if (type == 0) {
                    arr.push(titleSpan.eq(i).attr('_id'));
                }else if(type == 1){
                    arr.push(titleSpan.eq(i).text());
                }
            }
            if(type == 2){
                var data = that.options.data;
                var id = that.options.dataField.id;
                $.each(data,function(index,item){
                    $.each(that.options.selected,function(index2,item2){
                        if(item[id] == item2){
                            arr.push(item)
                        }
                    })
                })
            }
            return arr;
        },
        getSelectValue:function(){
            return this.getSelectEach(0);
        },
        getSelectText:function(){
            return this.getSelectEach(1);
        },
        getSelectObj:function(){
            return this.getSelectEach(2);
        },
        setDefault:function(titleDefault,type){//设置title显示的值
            if(titleDefault.length == 0){
                this.options.selected = [];
                this.$element.find('.wui-select-item li').removeClass('active');
                this.$element.find('.wui-select-title').html('<p>'+this.options.placeholder+'</p>')
            }else{
                this.options.selected = titleDefault;
            }
            if (this.options.isChecked) {//多选--默认值
                var items = this.$element.find('.wui-select-item li'),
                    dfs;
                for (var i = 0; i < items.length; i++) {
                    item_id = $(items[i]).attr('_id');
                    for (var j = 0; j < titleDefault.length; j++) {
                        if (item_id == titleDefault[j]) {
                            $(items[i]).click();
                        }
                    }

                }
            }else{//单选--默认值
                if (titleDefault.length <= 1) {//有默认值 单选--只能有一个默认值
                    var dfs = titleDefault[0];
                    this.$element.find('.wui-select-item li[_id='+dfs+']').click();
                }else{
                    throw "单选只能有一个默认值";
                    return;
                }
            }
        },
        setDisabled:function(tag){
            if(typeof tag == 'boolean'){
                this.options.disabled = tag;
                if(this.options.disabled){
                    this.$element.find('.wui-select-title').css('cursor','no-drop');
                }else{
                    this.$element.find('.wui-select-title').css('cursor','pointer');
                }
            }else{
                throw "setDisabled方法传参类型错误"
                return;
            }
        },
        errorType:function(){//检验传参是否有误
            if (typeof this.options.isChecked !== "boolean") {
                throw "isChecked参数类型错误"
                return;
            }
            if (typeof this.options.isSearch !== "boolean") {
                throw "isSearch参数类型错误"
                return;
            }
            if (typeof this.options.isDelete !== "boolean") {
                throw "isDelete参数类型错误"
                return;
            }
            if (!this.options.data instanceof Array) {
                throw "data参数类型错误"
                return;
            }
            // if (this.options.dataField.text.length == 0 || this.options.dataField.id.length == 0) {
            //     throw "dataField参数text和id为必填项"
            //     return;
            // }
        },
        init:function(){
            this.errorType();//检验传参是否有误
            var options = this.options,
                isChecked = options.isChecked,
                isSearch = options.isSearch,
                isDelete = options.isDelete,
                defaultShow = options.defaultShow,
                data = options.data,
                dataField = options.dataField,
                _text = dataField.text,
                _id = dataField.id,
                htmlStr = '<div class="wui-select"><div class="wui-select-title"></div><div class="wui-select-content">';

                if (isSearch) {//是否有搜索
                    htmlStr += '<input type="text" name="wui-select-search" placeholder="搜索" class="wui-select-search">'
                };
                if (data.length && _text && _id) {//遍历数据
                    htmlStr += '<ul class="wui-select-item">';
                    for (var i = 0; i < data.length; i++) {
                        htmlStr += '<li _id="'+data[i][_id]+'"><div>'+data[i][_text]+'</div><span>✔</span></li>';
                        if (data[i].selected) {
                            this.options.selected.push(data[i][_id])
                        }
                    }
                    htmlStr += '</ul>';
                }

                htmlStr += '</div></div>';

                this.$element.html(htmlStr);

                return this.bindEvent();
        }
    }
    $.fn.SelectPlugin = function(options){
        var select = new Select(this,options);
        return select.init();
    }
})(jQuery,window,document)

css

@charset "UTF-8";
.wui-select{
    position: relative;
    font-size: 16px;
    color: #000;
}
.wui-select-title{
    padding-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 20px;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}
.wui-select-title:after{
    position: absolute;
    right: 12px;
    top: 12px;
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    border: 6px solid #000;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}
.wui-select-title>p{
    color: #666;
}
.wui-select-content{
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    padding: 12px;
    border: 1px solid #ccc;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    cursor: default;
    background-color: #fff;
    z-index: 999;
}
.wui-select-bottom{
    top: 34px;
}
.wui-select-top{
    bottom: 34px;
}
.wui-select-search{
    padding: 0 10px;
    display: block;
    border: 1px solid #ccc;
    height: 30px;
    line-height:30px;
    border-radius: 3px;
    display: inline-block;
    width: 100% !important;
    box-sizing: border-box;
    padding: 0;
}
.wui-select-item{
    list-style: none;
    overflow-y: auto;
}
.wui-select-item>li{
    padding: 0 5px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    white-space: nowrap;
}
.wui-select-item>li>div{
    display: inline-block;
}
.wui-select-item>li>span{
    margin-left: 5px;
    float: right;
    display: inline-block;
    color: transparent;
}
.wui-select-item>li:hover{
    background-color: #ccc;
}
.wui-select-item>li.active span{
    color: #000;
}

html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.js"></script>
        <script src="./select.js" charset="utf-8"></script>
        <link rel="stylesheet" href="./select.css">
    </head>
    <style media="screen">
        *{
            margin: 0;
            padding: 0;
            box-sizing:border-box;
        }
        .select{
            margin-top: 200px;
        }
        .select2{
            margin-top: 100px;
            width: 200px;
            margin-left: 10px;
        }
    </style>
    <body>
        <div class="select">
            <!-- <div class="wui-select-title">
                <div class="wui-select-content">
                    <input type="text" name="wui-select-search" placeholder="搜索" class="wui-select-search">
                </div>
            </div> -->
        </div>
        <div class="select2">

        </div>
        <p class="button">11</p>
        <button type="button" name="button">获取</button>
    </body>
    <script type="text/javascript">
        $(function(){
            var a = {
                isChecked: false,//是否可以多选
                isSearch: true,//是否可以搜索
                isDelete: false,//是否可以删除
                placeholder:'请输入内容',
                place:'top',//位置 默认bottom，可选top
                height:'100',//选择框高度 默认160
                disabled:false,
                getClickSelect:function(list){//每次点击回调
                    console.log(list);
                },
                defaultShow: [1],//默认值唯一标识id
                data: [{
                    name: '下拉1',
                    id: '1',
                    isSelect:true
                },
                {
                    name: '下拉2',
                    id: '2'
                },
                {
                    name: '下拉3',
                    id: '3'
                },{
                    name: '下拉4',
                    id: '4'
                },{
                    name: '下拉5',
                    id: '5'
                },
                {
                    name: '下拉6',
                    id: '6'
                }],//下拉数据
                dataField:{//下拉数据字段
                    text:'name',
                    id:'id'
                }
            }
            var balabala = $('.select').SelectPlugin(a);
            $('.button').on('click',function(){
                console.log(balabala.selectCb());
            })

            var b = {
                isChecked: true,//是否可以多选
                isSearch: true,//是否可以搜索
                isDelete: false,//是否可以删除
                place:'bottom',//位置 默认bottom，可选top
                // disabled:true,
                placeholder:'请输入内容',
                // selected:[1,2,3],
                getClickSelect:function(list,listObj,that){//每次点击回调
                    console.log(listObj);
                },
                height:'100',//选择框高度 默认160
                data: [{
                    name: '下拉1',
                    id: '1'
                },
                {
                    name: '下拉2',
                    id: '2',
                    isSelect:true
                },
                {
                    name: '下拉3',
                    id: '3',
                    isSelect:true
                },{
                    name: '下拉4',
                    id: '4'
                },{
                    name: '下拉5',
                    id: '5'
                },
                {
                    name: '下拉6',
                    id: '6'
                }],//下拉数据
                dataField:{//下拉数据字段
                    text:'name',
                    id:'id'
                }
            }
            var b = $('.select2').SelectPlugin(b)
            $('button').on('click',function(){
                console.log(b.getSelectText());
                console.log(b.getSelectValue());
                console.log(b.getSelectObj());
                // b.setDisabled(false)
            })
            b.setDefault([1,2])

        })
    </script>
</html>