下拉复选框

落日映苍穹つ 2023-06-05 12:58 173阅读 0赞

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

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

![images2018-cnblogs-com_blog_1401533_201808_1401533-20180808183325444-342647053.gif][]

**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>
    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");

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[https_www.cnblogs.com_lprosper_p_9313536.html]: https://www.cnblogs.com/lprosper/p/9313536.html
[images2018-cnblogs-com_blog_1401533_201808_1401533-20180808183325444-342647053.gif]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/51/images2018-cnblogs-com_blog_1401533_201808_1401533-20180808183325444-342647053.gif