下拉复选框-阿里云开发者社区

开发者社区> prosperlee> 正文

下拉复选框

简介: 最近在项目开发中,有的地方用到了下拉复选框,于是再网上找了一下,有很多种写法,但自己感觉不是很好,又不想用插件,因为感觉引入的js太大,功能太繁杂,于是决定自己写一个小demo,效果如下: (改善:当遇到选项比较多时,可以定义一个数组插入到HTML中,实现下拉的选项,可以参考省市区联动的写法:https://www.
+关注继续查看

最近在项目开发中,有的地方用到了下拉复选框,于是再网上找了一下,有很多种写法,但自己感觉不是很好,又不想用插件,因为感觉引入的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");

GitHub:Fuck me on GitHub Fuck me on GitHub

留下你的足迹求推荐呦

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9569 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26746 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2465 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9074 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13266 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7394 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4078 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6980 0
+关注
51
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载