首页 > 代码库 > 模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）

模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）

2024-09-20 20:54:57   216人阅读

最近需要一个下拉多选，本来想偷懒的，所以在网上百度了一番，最终还是发现没有一个符合自己要求的，所以我自己写了一个插件。下面是GIF动态效果图展示

技术分享

 

相信大家已经看到效果了，接下来就是我的代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟select下拉框之多选</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style: none;
        }
        #test{
            margin:20px 10px;
        }
        .clearfix:before,
        .clearfix:after{
            content: ‘‘;
            display: block;
            overflow: hidden;
            clear: both;
            height: 1px;
        }
        .fruitTitle{
            float: left;
            height: 30px;
            line-height: 30px;
            margin: 0 5px 0 20px;
        }
        .box1{
            position: relative;
            float: left;
            height: 30px;
        }
        .fruit1_ul1{
            display: inline-block;
            width:150px;
            height: 30px;
            line-height: 30px;
            padding: 0 0 0 8px;
            border:1px solid #bbb;
            border-radius: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; /*文本不换行,这样超出一行的部分被截取,显示...*/
            cursor: pointer;
        }
        .multiFruit1{
            display: none;
            position: absolute;
            left:0;
            top:30px;
            min-width: 148px;
            padding: 0 5px;
            background: #fff;
            border:1px solid #bbb;
            margin-top: -1px;
            overflow-x: hidden;
            z-index: 10;
            max-height: 150px;
        }
        .multiFruit1 li{
            white-space:nowrap;
            height: 30px;
            line-height: 30px;
        }
        .multiFruit1 input,
        .multiFruit1 label{
            cursor: pointer;
            margin: 2px 4px 0 0;
            vertical-align: middle;
        }
        .txt_p{
            display: none;
            position: absolute;
            left: 0;
            border: 1px solid #bbb;
            text-align: right;
            height: 40px;
            line-height: 40px;
            z-index: 10;
            background: #fff;
        }
        .select_ok1{
            padding: 7px 9px;
            font-size: 14px;
            border-radius: 5px;
            border:none;
            margin:-2px 5px 0 0;
            background: #337ab7;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form action="#" method="" id="test" class="clearfix">
        <!-- 隐藏域存储所选水平品种的ID -->
        <input type="hidden" name="fruit1" id="fruits"/>
        <strong class="fl fruitTitle">水果品种</strong>
    　　<div class="box1">
            <span class="fruit1_ul1">请选择水果</span>
            <ul class="multiFruit1">
            </ul>
        </div>
    </form>
    <script>
        //JSON对象fruit_variety模拟Ajax数据源
        var fruit_variety = [{fruitID:1,fruitName:"苹果"},{fruitID:2,fruitName:"梨"},{fruitID:3,fruitName:"西瓜"},{fruitID:4,fruitName:"哈密瓜"},{fruitID:5,fruitName:"草莓"},{fruitID:6,fruitName:"龙眼"},{fruitID:7,fruitName:"火龙果"},{fruitID:8,fruitName:"樱桃"},{fruitID:9,fruitName:"橘子"},{fruitID:10,fruitName:"水蜜桃"}];
    </script>
    <script src="jquery-1.7.2.js"></script>
    <script>
        $(function(){
            //生成多选下拉
            function multiSelect(obj1,obj2){
                for(var i=0;i<obj2.length;i++){
                    var input = document.createElement(‘input‘);
                    input.setAttribute(‘type‘,‘checkbox‘);
                    input.setAttribute(‘name‘,‘fruit_name‘);
                    input.setAttribute(‘id‘,obj2[i].fruitID);
                    input.setAttribute(‘value‘,obj2[i].fruitID);
                    var label = document.createElement(‘label‘);
                    label.setAttribute(‘for‘,obj2[i].fruitID);
                    label.innerHTML = obj2[i].fruitName;
                    var li = document.createElement(‘li‘);
                    li.append(input);
                    li.append(label);
                    $(obj1).append(li);
                }
                var btn = document.createElement(‘input‘);
                btn.setAttribute("type","button");
                btn.className = ‘select_ok1‘;
                btn.setAttribute("value","确定");
                var p = document.createElement(‘p‘);
                p.className = ‘txt_p‘;
                p.append(btn);
                $(obj1).parent().append(p);
            }
            multiSelect(‘.multiFruit1‘,fruit_variety);
            $(document).click(function(){
                $(‘.multiFruit1‘).hide();//隐藏下拉框
                $(‘.txt_p‘).hide();//隐藏确认按钮
                $(‘.multiFruit1 input‘).attr(‘checked‘,false);
                var v = $(‘#fruits‘).val();
                if(v != ‘‘){
                    //获取保存的选中值,并保存默认选中
                    var selectedNum = v.split(‘,‘);
                    for(var i=0;i < selectedNum.length;i++){
                        for(var j=0;j<$(‘.multiFruit1 input‘).size();j++){
                            if($(‘.multiFruit1 input‘).eq(j).val() == selectedNum[i]){
                                $(‘.multiFruit1 input‘).eq(j).attr("checked",true);
                            }
                        }
                    }
                }
            })
            $(‘.box1‘).click(function(e){
                e = e || window.event;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true; //IE
                }
                var w = $(‘.multiFruit1‘).innerWidth();
                var t = $(‘.multiFruit1‘).innerHeight() + $(‘.fruit1_ul1‘).innerHeight();
                $(‘.txt_p‘).css(‘width‘,w);
                $(‘.txt_p‘).css(‘top‘,t);
                $(‘.multiFruit1‘).show();
            })
            $(‘.fruit1_ul1‘).click(function(){
                $(‘.txt_p‘).show();
            })
            $(‘.select_ok1‘).click(function(e){
                e = e || window.event;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true; //IE
                }
                $(‘.multiFruit1‘).hide();
                $(‘.txt_p‘).hide();
                var value = ‘‘;
                var str = ‘‘;
                //将选中的值保存到value
                for(var i=0;i<$(‘input[name="fruit_name"]‘).size();i++){
                    if($(‘input[name="fruit_name"]‘).eq(i).attr(‘checked‘)){
                        value += ‘,‘ + $(‘input[name="fruit_name"]‘).eq(i).attr(‘value‘);
                        str += ‘,‘ + $(‘input[name="fruit_name"]‘).eq(i).siblings(‘label‘).html();
                    }
                }
                //采用substr去除第一个逗号分隔符
                value = value.substr(1);
                str = str.substr(1);
                //将value的值赋值给input隐藏域
                $(‘#fruits‘).val(value);
                //将str的值赋值给显示框隐藏域
                $(‘.fruit1_ul1‘).html(str);
            })
        })
    </script>
</body>
</html>

 

代码中有注释，如果有看不懂或者出现问题的可以留言问我，有空一定解答。

 

模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）


联系
我们