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