easyui 带复选功能的下拉菜单

最新推荐文章于 2023-11-22 16:31:02 发布

原创

最新推荐文章于 2023-11-22 16:31:02 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #代码 #easyui #下拉菜单复选框

本文介绍了如何在前端项目中创建一个带有复选功能的下拉菜单，包括全选、全不选、自定义提示信息和滚动条样式的实现，提供了关键的代码片段作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近由于项目需要，前端页面需要做一个带复选功能的下拉菜单，由于在项目中，需要特定的样式等，所以，给出核心代码以供日后复习：

1.效果图

2.实现的主要功能

（1）上方提示信息

（2）没有复选框但是有复选功能

（3）全选和全不选的功能

（4）选择或者取消后在上方横线上文本能体现出来

（5）滚动条样式

3.核心代码

因为是从项目中抽出来的，所以代码不可直接运行，主要的思路如下：

jsp页面：

<span id="terminalTypeSpan"  style="display:none;">
	<select id="terminalType" name="terminalType"  class="easyui-combobox sep" data-options="editable:true,width:500" ></select>
	<div id="spanel">
	   <div id="sp">
		  <div class="checkitem">
                             <span class="checkbox1" id="all">✔</span>
			     <span class="checkboxValue">全部终端设备</span>
	           </div>
	   &l