[html] 自定义的下拉多选

最新推荐文章于 2024-09-10 13:54:44 发布

╮易拉罐儿╭

最新推荐文章于 2024-09-10 13:54:44 发布

阅读量2.4k

点赞数 2

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_39356853/article/details/84310255

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近项目需求中有一些地方需要使用到类似winfrom中的下拉多选的控件，在网上搜了一堆，发现并不能满足我的需求，

通过将html <select>标签的multiple 设置为multiple 这个点击的时候需要通过ctrl + 鼠标左键而且不同的浏览器的效果也有区别

所以自己写一个记下来

<!DOCTYPE html>

<html lang="" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <title></title>
    <style>
        .cus-mu-select{
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
            padding: 5px 0;
            min-width: 80px;
            margin: 0;
            display: none;
            font-family: "微软雅黑";
            font-size: 14px;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, .15);
            box-sizing: border-box;
            border-radius: 4px;
            -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#device-filter").click(function (){
                var selec = $("#device-filter");
                $("#device-filter-sub-item").css({"display": "block",
                "top": selec.offset().top + parseInt(selec.css("height")) + 5 + "px",
                "width": selec.css("width"),
                "left": selec.offset().left + "px"});
            });
            $("#btn-filter-ok").click(function(){
                $("#device-filter").val('');
                $("#device-filter-sub-item").find("input[type='checkbox']").each(function(){
                    if($(this).prop("checked")){
                        $("#device-filter").val($("#device-filter").val() + ($("#device-filter").val() == "" ? "" : ",") + $(this).val())
                    }
                });
                $("#device-filter-sub-item").css({"display": "none"})
            });
        });
    </script>
</head>
<body>
    <input readonly='readonly' id="device-filter"/><button id="btn-filter-ok">确定</button>
    <div class='cus-mu-select' id="device-filter-sub-item">
        <li><label><input type="checkbox" value="DR|DR-1"/>DR|DR-1</label></li>
        <li><label><input type="checkbox" value="MR|MR-1"/>MR|MR-1</label></li>
    </div>
</body>
</html>

这个里面也有一个不错的但是没怎么细看 select 下拉框多选，用select代替checkbox http://www.freejs.net/demo/524/index.html