先看看效果：
下面我们看看代码：
html代码：
<div> <select name="" id="lang1"></select> <ul id="ck1"> <li> <label><input type="checkbox">html</label> </li> <li> <label><input type="checkbox">css</label> </li> <li> <label><input type="checkbox">javascript</label> </li> <li> <label><input type="checkbox">jquery</label> </li> <li> <label><input type="checkbox">php</label> </li> <li> <label><input type="checkbox">mysql</label> </li> </ul> </div> <hr><!--html结构不能变--> <div> <select name="" id="lang2"></select> <ul id="ck2"> <li> <label><input type="checkbox">java</label> </li> <li> <label><input type="checkbox">c#</label> </li> <li> <label><input type="checkbox">c++</label> </li> <li> <label><input type="checkbox">pyhton</label> </li> </ul> </div> <input type="button" onclick="console.log({'tag1':tag1,'tag2':tag2,})" value="查看字段">
css代码：
div { display: inline-block;}select { min-width: 200px; height: 25px; border: 1px solid #000;}ul { display: none; list-style: none; margin: 0; padding: 0; border: 1px solid #000;}label { display: block; padding: 2px 10px; white-space: nowrap;}ul li:hover { background-color: #aabbcc;}
javascript代码：
/** * [dropdownck 下拉复选框] * @param {[string]} boxid [父级元素id] * @param {[string]} selectid [下拉选id] * @param {[string]} hiddenid [隐藏区域id] * @return {[array]} [description] */ function dropdownck(selectid,hiddenid) { var boxid = "#" + boxid, selectid = "#" + selectid, hiddenid = "#" + hiddenid; $(hiddenid).mouseleave(function(){ // 鼠标离开隐藏复选区域 $(this).hide(); }); $(selectid).click(function() { // 切换显示与隐藏 $(hiddenid).toggle(); }); var tagarr = []; // 接收复选字段数组 $(selectid).html("<option checked='true' style='display:none;'>" + "请选择项目" + "</option>"); $(hiddenid + ' label').find('input').click(function() { // 点击向数组添加元素 if ($(this).is(':checked')) { tagarr.push($(this).parent().text()); $(selectid).html("<option checked='true' style='display:none;'>" + tagarr.join(",") + "</option>"); } else { tagarr.splice(tagarr.indexof($(this).parent().text()), 1); // 删除对应元素 if (tagarr.length == 0) { $(selectid).html("<option checked='true' style='display:none;'>" + "请选择项目" + "</option>"); } else { $(selectid).html("<option checked='true' style='display:none;'>" + tagarr.join(",") + "</option>"); } } }); return tagarr; } var tag1 = dropdownck("lang1","ck1"); var tag2 = dropdownck("lang2","ck2")
注意：当遇到选项比较多时，可以定义一个数组插入到html中，实现下拉的选项，可以参考三级联动的写法：玩转javascript之三级联动实例。
以上就是js实现下拉复选框效果（代码实例）的详细内容。