下拉多选checkbox

来源：互联网发布：海岛大亨5知乎编辑：程序博客网时间：2024/05/17 01:17

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

- - CSS代码
  - HTML代码
  - JS代码
  - 全部代码

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

下拉多选

（注：选中下拉多选框之后点击输入框及下拉以外的地方隐藏下拉。依赖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>

1 0