jQuery多选下拉框

PROMULGATOR

箴言。

江苏省

← jQuery轮播图

→ 获取所需日期的计算方法

相关代码

模拟下拉框插件

下拉多选自定义

jQuery多选下拉框

可编辑下拉框

使用ul制作的（下拉框）

div模拟下拉框

jquery+css模拟下拉框

Html

Css

Js

* {
	margin:0;
	padding:0;
	list-style:none;
	box-sizing:border-box;
}
.drop {
	width:300px;
	height:auto;
	margin:100px auto;
}
.drop-header {
	width:100%;
	padding:5px 10px;
	border:#c7c7c7 1px solid;
	word-wrap:break-word;
	min-height:32px;
}
.drop-header span {
	position:relative;
	display:inline-block;
	padding-right:5px;
	padding-left:5px;
	margin:1px 5px 1px;
	line-height:20px;
	background-color:#a9a9a9;
	color:#fff;
	cursor:pointer;
}
.drop-dwon {
	position:absolute;
	width:100%;
	height:auto;
	line-height:25px;
	border:#c7c7c7 1px solid;
	box-shadow:#c7c7c7 1px 1px 4px;
	max-height:200px;
	overflow-y:auto;
	overflow-x:hidden;
}
.drop-dwon li {
	padding:5px 10px;
	cursor:pointer;
}
.drop-dwon li:hover,.drop-dwon li.active:hover {
	color:#fff;
	background-color:#18717b;
}
.drop-dwon li.active {
	color:#fff;
	background-color:#07a4b5;
}

$(function() {

dropDwon({
        id: 'drop',
        myData: {
            name1: {
                val: '111',
                selected: true,
            },
            name2: {
                val: '222',
            },
            name3: {
                val: '333'
            },
            name4: {
                val: '444'
            },
            name5: {
                val: '555'
            },
            name6: {
                val: '666'
            },
            name7: {
                val: '777'
            },
            name8: {
                val: '888'
            },
        }
    })

})

function dropDwon(option) {
    function drop(def) {
        this.name = def.id;
        this.init();
    };
    drop.prototype = {
        init: function() {
            this.list();
            this.myClick();
            this.callBack();
        },
        //添加下拉框到页面中
        list: function() {
            var id = '#' + this.name;
            var header = '<div class="drop-header" type="' + def.type + '"></div>';
            //默认下拉框选项
            $(id).append(header);
            if (def.type == 'single') {
                for (var key in def.myData) {
                    if (def.myData[key].selected == true) {
                        var headerTxt = def.myData[key].val;
                        $(id).find('.drop-header').text(headerTxt)
                    };
                };
            };
            var newPo = $(id).offset();
            var newW = parseInt($(id).css('width'));
            var newH = parseInt($(id).css('height'));
            $('.drop-dwon').css({
                width: newW + 'px',
                top: newPo.top + newH + 'px',
                left: newPo.left + 'px'
            });
        },
        //下拉框点击事件
        myClick: function() {
            var self = this;
            var name = this.name;
            var id = '#' + this.name;
            $(id).click(function(e) {
                e.stopPropagation();
                $('.drop-dwon').remove();
                var _this = $(this);
                var lists, drop;
                lists = '';
                for (var key in def.myData) {
                    lists += '<li value="' + key + '" sel="">' + def.myData[key].val + '</li>';
                };
                var drop = '<ul class="drop-dwon" id="' + name + 'con">' + lists + '</ul>';
                $('body').append(drop);
                self.position('.drop-dwon');
                //改变屏幕宽度的时候，重新计算下拉框内容的位置
                window.onresize = function() {
                    self.position('.drop-dwon');
                };
                if (def.type == 'sigle') {
                    self.sinClick();
                } else if (def.type == 'multi') {
                    self.mltClick();
                }
            });
        },
        //计算下拉框内容的位置
        position: function(obj) {
            var id = '#' + this.name;
            var myPo = $(id).offset();
            var myW = parseInt($(id).css('width'));
            var myH = parseInt($(id).css('height')) - 1;
            $(obj).css({
                top: myPo.top + myH + 'px',
                left: myPo.left + 'px',
                width: myW + 'px',
            });
        },
        sinClick: function() {
            var name = this.name;
            var id = '#' + name + 'con';
            $(id).on('click', 'li', function(e) {
                e.stopPropagation();
                $('#' + name).find('.drop-header').text($(this).text())
            });
            $(document).click(function() {
                $(id).remove();
            });
        },
        mltClick: function() {
            var self = this;
            var name = this.name;
            var id = '#' + name + 'con';
            var header = $('#' + name).find('.drop-header');
            $(id).on('click', 'li', function(e) {
                e.stopPropagation();
                var sel = $(this).attr('sel');
                if (sel == 'true') {
                    $(this).removeClass('active');
                    $(this).attr('sel', false);
                    var rem = $(this).attr('value');
                    header.find('span').each(function() {
                        if ($(this).attr('vel') == rem) {
                            $(this).remove();
                        };
                    });
                } else {
                    $(this).addClass('active');
                    $(this).attr('sel', true);
                    var txt = '<span vel="' + $(this).attr('value') + '">' + $(this).text() + '</span>';
                    header.append(txt);
                };
                self.position('.drop-dwon');
                self.mtlRemove();
            });
            $(document).click(function() {
                $(id).remove();
            });
        },
        mtlRemove: function() {
            var self = this;
            var name = this.name;
            var id = '#' + name;
            $(id + ' ' + 'span').click(function(e) {
                e.stopPropagation();
                var _this = $(this);
                var vle = _this.attr('vel');
                _this.remove();
                $(id + 'con li').each(function() {
                    var vleLi = $(this).attr('value');
                    if (vleLi == vle) {
                        $(this).removeClass('active');
                        $(this).attr('sel', false);
                    };
                });
                self.position('.drop-dwon');
            });
        },
        callBack: function() {
            def.callBack();
        }
    };
    var def = {
        type: 'multi', //multi:多选；sigle：单选
        myData: {
            name1: {
                val: '默认选中',
                selected: true,
            },
            name2: {
                val: '下拉1',
            },
            name3: {
                val: '下拉2'
            },
            name4: {
                val: '下拉3'
            },
        },
    };
    def = $.extend(def, option);
    new drop(def);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.10.2

立即下载

jQuery多选下拉框



代码描述：简单单选下拉框，多选下拉框

2

最新

发表评论全部评论

暂时没有评论！

哎呀我去哪儿呢0

2017/7/3 10:02:53

用户体验不好

williamdream0

2017/7/8 10:15:10

可以看看这个，稍微好点http://www.jq22.com/jquery-info5428

回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery多选下拉框-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号