模擬select下拉框之多選（數據源採用模擬Ajax數據--原創）

時間 2019-11-12

標籤模擬 select 下拉之多數據採用 ajax 原創欄目 Ajax 简体版

原文原文鏈接

最近須要一個下拉多選，原本想偷懶的，因此在網上百度了一番，最終仍是發現沒有一個符合本身要求的，因此我本身寫了一個插件。下面是GIF動態效果圖展現css

相信你們已經看到效果了，接下來就是個人代碼展現html

<!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>