Javascript 要为所有项目添加带有复选框的下拉列表（即多选择器下拉列表）

在上图中，有一个“学习材料类型”下拉列表：。我想为“学习材料类型”添加一个多选择器下拉列表[带有所有项目复选框的下拉列表]：“有人能帮我吗？”？ 我的代码片段是->

表格#表格1#s00{
填充物：5px25px 5px；
宽度：300px；
边框：1px实心rgba（0,0,0,0.2）；
}
表格#表格1#srchMore{
左边距：-27px；
光标：指针；
颜色：#ccc；
}
表单#表单1#srchMore:hover{color:#0ac；}
表格#表格1.srchMoreAct{color:#333；}
表格#表格1#srchMoreOpt{
宽度：350px；
填充：10px；
盒影：0px2p4pRGBA（0,0,0,0.2）；
边框：2倍实心rgba（0,0,0,0.2）；
z指数：9999；
位置：绝对位置；
背景色：白色；
顶部：150px；
左：600px；
}
表格#表格1.hid{
显示：无；
}
表单#form1#srchMoreOpt.exi{float:right；padding:0px 4px；字体系列：'Arial'；光标：指针；背景：#ccc；颜色：#666；}
表单#form1#srchMoreOpt.exi:hover{background:#0ac；color:#fff；}
#方面\发现\简单搜索\字段\过滤器类型\ 1{
显示：隐藏；
}
表格#表格1#srchMoreOpt>div{
填充物：5px；
}

x
作者：



学习材料的类型：
… 
书
视频讲座
有声讲座
运动
解决方案
测验
动画
模拟
课堂笔记
数据集
实验
自我评估
难度等级：
… 
违约
很容易
容易的
中等
困难的
很难



教育程度：
… 
学前教育
第一类
第二类
第三类
第四类
第五类
第六类
第七类
第八类
第九类
X类
班席
第十二类
未毕业
研究生
博士

使用jquery MultiSelect小部件

此处演示：

可能的副本：

---

是的，你绝对可以！请使用下面的代码段作为参考

var checkList=document.getElementById（'list1'）；
var items=document.getElementById（'items'）；
checkList.getElementsByCassName（'anchor'）[0]。onclick=function（evt）{
if（items.classList.contains（'visible'））{
items.classList.remove（'visible'）；
items.style.display=“无”；
}
否则{
items.classList.add（'visible'）；
items.style.display=“block”；
}
}
items.onblur=函数（evt）{
items.classList.remove（'visible'）；
}

。下拉检查列表{
显示：内联块；
}
。下拉列表。锚定{
位置：相对位置；
光标：指针；
显示：内联块；
填充：5px 50px 5px 10px；
边框：1px实心#ccc；
}
。下拉列表。锚定：在{
位置：绝对位置；
内容：“；
左边框：2倍纯黑；
边框顶部：2件纯黑；
填充物：5px；
右：10px；
最高：20%；
-moz变换：旋转（-135度）；
-ms变换：旋转（-135度）；
-o变换：旋转（-135度）；
-webkit变换：旋转（-135度）；
变换：旋转（-135度）；
}
。下拉列表。锚定：活动：之后{
右：8px；
最高：21%；
}
.下拉式检查表ul.项目{
填充：2px；
显示：无；
保证金：0；
边框：1px实心#ccc；
边界顶部：无；
}
.下拉列表ul.项目li{
列表样式：无；
}

精选水果

苹果
橙色的
葡萄
浆果
芒果
香蕉
西红柿

如果您使用自定义的原始JS弹出窗口，那么在出现层重叠时会非常困难。我建议使用一些简单的代码。见下文：

功能actDdrp（e）{
e=document.getElementById（e.parentNode.getAttribute（'id'）；
如果（e.style.height！=“auto”）e.style.height=“auto”；
否则e.style.height='32px'；
}

.ddrp{边框：1px实心#ccc；宽度：250px；高度：32px；溢出：隐藏；边距底部：10px；}
.ddrp{margin:0；padding:7px；}
.ddrp:first child{cursor:pointer；-webkit用户选择：无；-moz用户选择：无；用户选择：无；}
.ddrp：第一个子span{float:right；color:#999；}

类型
音频

录像带

类别▼
第一类

第2类

第3类

I我的代码您可以像这样使用多个下拉列表。只需使用

class=“ddrp”

并确保id像

ddrp\u 1

一样。在JavaScript

e.style.height='32px'

中，用于切换下拉列表的支出，如果更改它，请确保更改CSS

height:32px也是。我使用了
用户选择：无以限制鼠标双击选择。