实现下拉菜单多选

来源:转载


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉多选</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style>
        ul li{
            list-style: none;
        }
        .hide{display: none}
        .width150{
            width: 150px;
        }
        .width150 input[type="text"]{
            width: 100%;
            height: 32px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding-left: 12px;
        }
        .width150 ul{
            width: 96%;
            padding: 0 0 0 20px;
            margin: 0;
            border: 1px solid #ccc;
        }
        .width150 li{
            padding: 5px;
        }
        .width150 li+li{
            border-top: 1px solid #ccc;
        }
    </style>
</head>
<body>
<form id="form">
    <div class="width150">
        可多选年份:<input type="text" id="yearInput" placeholder="请选择年份" readonly>
        <ul id="yearId" class="hide">
        </ul>
    </div>
</form>
<script>
    (function(){
        var str = '';
        var arr = {
            0 : {name:'2015',id:0},
            1 : {name:'2016',id:0},
            2 : {name:'2017',id:0}
        };
        for (let x in arr){
            console.info(x);
            str += `<li><label><input type="checkbox" value="${arr[x].id}" data-name="${arr[x].name}">${arr[x].name}</label></li>`;
        }
        $('#yearId').html(str);
    })();


    $("#yearInput").click(function(){
        $(this).attr('placeholder','');
        var name = '';
        $('#yearId input').each(function () {//循环遍历checkbox
            var  check=$(this).is(':checked');//判断是否选中
            if(check){
                name += $(this).attr('data-name')+',';
                $(this).attr('name',"yearId");
            }else {
                $(this).attr('name',"");
            }
        });
        $("#yearInput").val(name.slice(0,-1));//去除最后的逗号
    });


    $("#yearId").mouseover(function() {
        if (!$("#yearId").hasClass('hover')){//类hover在下面用来验证是否需要隐藏下拉,没有其他用途。
            $("#yearId").addClass('hover');
        }
    }).mouseout(function(){
        $("#yearId").removeClass('hover');
    });


    $(document).on('click',function() {
        if (!$("#yearInput").is(":focus") && !$("#yearId").hasClass('hover')) {//如果没有选中输入框且下拉不在hover状态。
            var name = '';
            $('#yearId input').each(function () {//遍历checkbox
                var check = $(this).is(':checked');//判断是否选中
                if (check) {
                    name += $(this).attr('data-name') + ',';
                    $(this).attr('name', "yearId");
                } else {
                    $(this).attr('name', "");
                }
            });
            $("#yearInput").val(name.slice(0, -1));//去除最后的逗号
            $("#yearId").addClass('hide');
        } else {
            $("#yearId").removeClass('hide');
        }
    });
</script>
</body>
</html>

分享给朋友:
您可能感兴趣的文章:
随机阅读: