最近在項目開發中，有的地方用到了下拉復選框，於是再網上找了一下，有很多種寫法，但自己感覺不是很好，又不想用插件，因為感覺引入的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");