下拉多选checkbox

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

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 () {//循环遍历checkboxvar  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 () {//遍历checkboxvar 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 () {//循环遍历checkboxvar  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 () {//遍历checkboxvar 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>

下拉多选checkbox相关推荐

[Ext JS 4] 实战之多选下拉单 (带checkbox) 续 - 带ALL 选项
前言在 [Ext JS 4] 实战之多选下拉单 (带checkbox) 这一篇中有介绍如何开发带有checkbox 的多选菜单. 但是实际项目开发过程中, 用户的需求也是不断精进的. 使用淘宝或是其 ...
Flutter：使用复选框进行下拉多选
Flutter:使用复选框进行下拉多选本文向您展示了在 Flutter 中使用复选框实现下拉多选的两种不同方法.在第一种方法中,我们将从头开始构建多选.在第二种方法中,我们将使用第三方包快速完成工作 ...
axure 下拉多选元件_Axure教程：下拉多选列表集合（多选下拉列表+单选下拉列表+分级下拉列表）...
原标题:Axure教程:下拉多选列表集合(多选下拉列表+单选下拉列表+分级下拉列表) 之前和大家分享了 <>.<>,很多同学私信我说很好使用,希望能够做一个多选下拉列表的教程 ...
el-select 结合 el-checkBox 实现下拉全选+多选功能；el-select下拉框全选功能；
原文链接 el-select选择框也有多选功能,但是没有全选.故需要改造一下,el-select 结合 el-checkBox 实现下拉全选+多选功能. 代码如下,可直接复制使用: <!--* ...
vue中input多选_vue实现下拉多选vue实现多选下拉框
效果展示 image.png下拉组件 ∨ //下拉列表 {{item.Name}} data() { return { checkedData: [], //选中的数据 isShow: false, ...
ajax实现下拉列表回显,layui实现下拉复选功能的例子(包括数据的回显与上传)
一.layui下拉复选实现的背景:实现一个管理员拥有多个权限二. 具体实现: //依赖资源 //页面显示角色: xm-select-search xm-select-skin="defa ...
jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
jqgrid表格插件应该是表格插件中最强大吧,最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制,还好jqgrid的源码写清晰易懂. jqgrid有个下拉搜索的功能,我们先看下官网的展示, ...
easyui下拉多选框的创建、获取值、赋值
EasyUI后台往前端赋值的时候要用JSON格式,不然容易引起特殊符号导致的不显示 easyui下拉多选Demo: <select class="easyui-combobox&quo ...
layui 实现下拉多选功能 [xm-select]
背景近期负责的管理后台,有下拉多选的业务需求通过网上的经验搜索,发现 xm-select 是个非常不错的选择并且,当前的后台使用的正是 layui 前端框架所以,在此整理一下对下拉多选功能 ...