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

最新推荐文章于 2024-08-08 08:21:46 发布

beanLau

最新推荐文章于 2024-08-08 08:21:46 发布

阅读量838

点赞数 1

分类专栏： javascript jquery插件

本文链接：https://blog.csdn.net/qq_27223987/article/details/81941565

版权

本文展示了如何创建一个具有单选和多选功能并支持过滤的下拉框插件。通过示例代码，演示了JavaScript、CSS和HTML的结合使用，实现了下拉框的交互和筛选功能。

摘要由CSDN通过智能技术生成

先看看效果

直接上代码

// 实例.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'