下拉复选框

最近在项目开发中,有的地方用到了下拉复选框,于是再网上找了一下,有很多种写法,但自己感觉不是很好,又不想用插件,因为感觉引入的js太大,功能太繁杂,于是决定自己写一个小demo,效果如下:

(改善:当遇到选项比较多时,可以定义一个数组插入到HTML中,实现下拉的选项,可以参考省市区联动的写法:https://www.cnblogs.com/lprosper/p/9313536.html

CSS:

 1 div {
 2     display: inline-block;
 3 }
 4 
 5 select {
 6     min-width: 200px;
 7     height: 25px;
 8     border: 1px solid #000;
 9 }
10 
11 ul {
12     display: none;
13     list-style: none;
14     margin: 0;
15     padding: 0;
16     border: 1px solid #000;
17 }
18 
19 label {
20     display: block;
21     padding: 2px 10px;
22     white-space: nowrap;
23 }
24 
25 ul li:hover {
26     background-color: #aabbcc;
27 }

HTML:

 1     <div>
 2         <select name="" id="lang1"></select>
 3         <ul id="ck1">
 4             <li>
 5                 <label><input type="checkbox">HTML</label>
 6             </li>
 7             <li>
 8                 <label><input type="checkbox">CSS</label>
 9             </li>
10             <li>
11                 <label><input type="checkbox">JavaScript</label>
12             </li>
13             <li>
14                 <label><input type="checkbox">jQuery</label>
15             </li>
16             <li>
17                 <label><input type="checkbox">PHP</label>
18             </li>
19             <li>
20                 <label><input type="checkbox">MySQL</label>
21             </li>
22         </ul>
23     </div>
24     <hr><!--HTML结构不能变-->
25     <div>
26         <select name="" id="lang2"></select>
27         <ul id="ck2">
28             <li>
29                 <label><input type="checkbox">Java</label>
30             </li>
31             <li>
32                 <label><input type="checkbox">C#</label>
33             </li>
34             <li>
35                 <label><input type="checkbox">C++</label>
36             </li>
37             <li>
38                 <label><input type="checkbox">Pyhton</label>
39             </li>
40         </ul>
41     </div>
42     <input type="button" onclick="console.log({'tag1':tag1,'tag2':tag2,})" value="查看字段">

JavaScript:

 1     /**
 2      * [dropDownCk 下拉复选框]
 3      * @param  {[String]} boxId    [父级元素id]
 4      * @param  {[String]} selectId [下拉选id]
 5      * @param  {[String]} hiddenId [隐藏区域id]
 6      * @return {[Array]}          [description]
 7      */
 8     function dropDownCk(selectId,hiddenId) {
 9 
10         var boxId = "#" + boxId,
11             selectId = "#" + selectId,
12             hiddenId = "#" + hiddenId;
13         
14         $(hiddenId).mouseleave(function(){ // 鼠标离开隐藏复选区域
15             
16             $(this).hide();
17         
18         });
19         
20         $(selectId).click(function() { // 切换显示与隐藏
21 
22             $(hiddenId).toggle();
23 
24         });
25 
26         var tagArr = []; // 接收复选字段数组
27 
28         $(selectId).html("<option checked='true' style='display:none;'>" + "请选择项目" + "</option>");
29 
30         $(hiddenId + ' label').find('input').click(function() { // 点击向数组添加元素
31 
32             if ($(this).is(':checked')) {
33 
34                 tagArr.push($(this).parent().text());
35 
36                 $(selectId).html("<option checked='true' style='display:none;'>" + tagArr.join(",") + "</option>");
37 
38             } else {
39 
40                 tagArr.splice(tagArr.indexOf($(this).parent().text()), 1); // 删除对应元素
41 
42                 if (tagArr.length == 0) {
43 
44                     $(selectId).html("<option checked='true' style='display:none;'>" + "请选择项目" + "</option>");
45 
46                 } else {
47 
48                     $(selectId).html("<option checked='true' style='display:none;'>" + tagArr.join(",") + "</option>");
49 
50                 }
51 
52             }
53 
54         });
55 
56         return tagArr;
57     }
58 
59     var tag1 = dropDownCk("lang1","ck1");
60     var tag2 = dropDownCk("lang2","ck2");

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

Angular CLI 升级 6.0 之后遇到的问题

28720
来自专栏向治洪

React Native控件只TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型...

38980
来自专栏企鹅号快讯

react.js 学习笔记

单向数据流驱动,父节点传递到子节点 react最重要是组件 ReactJS官方地址:https://facebook.github.io/react/ GitH...

238100
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(3)---行列操作

开发人员可以定义用户与行和列的交互,如是否可以更改行或列的大小、是否可以移动行或列、冻结指定的行或列、在行或列中查找数据等。 更改行或列的大小 你可以允许用户重...

29660
来自专栏LeoXu的博客

requestWindowFeature的取值

requestWindowFeature(featrueId) 能启用窗体的扩展特性,它被用来应对开发程序时经常会遇到的全屏显示、自定义标题(使用按钮等控件)和...

9610
来自专栏陈纪庚

手把手教你实现一个引导动画

最近看了一些文章,知道了实现引导动画的基本原理,所以决定来自己亲手做一个通用的引导动画类。

13310
来自专栏happyJared

IDEA快捷键拆解系列(五):Navigate篇

  以下是关于Navigate导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

12520
来自专栏老司机的简书

老司机读书笔记——Weex学习笔记

Weex整体上与Vue语法大概一直,基本用法由阿里进行二次封装。以下主要介绍Weex的一些内置组件。

41640
来自专栏Young Dreamer

一种实现无缝循环播放音乐方案

场景: 为了节省页面资源,往往需要将一段小音频循环播放,通常做法是在audio标签上添加loop属性,但不幸的是,该属性并不能保证无缝循环(gapless lo...

34780
来自专栏前端知识分享

第86天:HTML5应用程序标签和智能表单

-webkit-appearance: none;   /*如果要改默认样式 要先取消默认样式 */

11620

扫码关注云+社区

领取腾讯云代金券