下拉多选checkbox

最新推荐文章于 2024-01-21 00:06:29 发布

CN-cheng

最新推荐文章于 2024-01-21 00:06:29 发布

阅读量8k

点赞数

分类专栏：小玩意小效果文章标签： html checkbox jquery 下拉多选

本文链接：https://blog.csdn.net/github_37125043/article/details/71753095

版权

小玩意同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

小效果

14 篇文章 0 订阅

订阅专栏

本文原创，转载请注明出处

今天根据要求让实现下拉列表加入多选按钮，之前写过百度搜索效果，但是感觉不太适用。然后大概想了一下就动手开始试着去写，实现效果如下图：

下拉多选

（注：选中下拉多选框之后点击输入框及下拉以外的地方隐藏下拉。依赖JQuery，为了写的方便些。）

CSS代码

定义一些样式：

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

HTML代码

定义输入框和显示下拉的ul：

<form id="form">    
    <div class="width150">
        可多选年份：<input type="text" id="yearInput" placeholder="请选择年份" readonly>
        <ul id="yearId" class="hide">
        </ul>
    </div>
</form>

JS代码

定义json数据、获取checkbox选中内容等：

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

上面代码input输入框显示的是数据的name，要是需要把id传到后端，就把checkbox的value传出去，可以用$(“#form”).serialize();获取选中的checkbox。

要想下拉有滚动条，设置一下 ul样式：


.width150 ul{
     width: 96%;
     padding: 0 0 0 20px;
     margin: 0;
     border: 1px solid #ccc;
     height: 100px;
     overflow-y: scroll;
}

全部代码

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

CN-cheng

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
下拉多选checkbox

下拉多选checkbox本文原创，转载请注明出处目录下拉多选checkbox目录CSS代码HTML代码JS代码今天根据要求让实现下拉列表加入多选按钮，之前写过百度搜索效果，但是感觉不太适用。然后大概想了一下就动手开始试着去写，实现效果如下图：（注：选中下拉多选框之后点击输入框及下拉以外的地方隐藏下拉。依赖JQuery，为了写的方便些。）CSS代码定义一些样式：<style> u
复制链接

扫一扫