工程出现下拉复选功能,把自己在网上查询的东西总结一下》》》》》》》》》》
1、首先引入Jquery库和要用的插件multiSelect
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script><!--在工程里面已经引入就不用再引用了-->
<script src="../jquery.bgiframe.min.js" type="text/javascript"></script><!--看具体工程需要引入-->
<script src="../jquery.multiSelect.js" type="text/javascript"></script>
<link href="../jquery.multiSelect.css" rel="stylesheet" type="text/css" />
2、html代码
<select id="selectDept" name="selectDept" style="width: 200px;" [color=red]multiple="multiple"[/color]>
<option value="">--请选择--</option>
<c:forEach items="${depList}" var="dep" >
<option value="${dep.organiseID}" >${dep.organiseName }</option>
</c:forEach>
</select>
<input type="hidden" name="organiseIdStr" id="organiseIdStr" value=""><!--添加一个隐藏域,获取选择的下拉列value-->
3、初始化multiSelect
$(document).ready(function(){
$("#selectDept").multiSelect({
selectAll: false,
oneOrMoreSelected: '*',
selectAllText: '全选',
noneSelected: '--请选择--'
}, function(){ <!--回调函数-->
$("#organiseIdStr").val($("#selectDept").selectedValuesString());
});
});
4、关于下拉列表的初始化
没有找到可用的函数,自己添加要初始化菜单的select属性就行。
简单使用了一下
分享到:
相关推荐
《jQuery Multiselect:打造高效的下拉复选框体验》 在网页开发中,用户界面的交互性和易用性是至关重要的。jQuery Multiselect插件,正如其名,为开发者提供了一个功能强大的下拉多选解决方案,它使得复选框在有限...
1. **多选模式**:Multiselect的核心功能就是实现多选,用户可以通过点击选项前的复选框来选择或取消选项。 2. **分组显示**:对于包含多个类别的选项,可以将其分组显示,每个组有自己的标题,提高用户浏览效率。 ...
jQuery Multiselect是一款基于jQuery UI库的插件,用于创建功能丰富的多选下拉列表。这款插件提供了多种特性,使得在网页中实现复杂的下拉列表交互变得更加便捷。以下是对jQuery Multiselect功能的详细介绍: 1. **...
总结来说,jQuery实现的下拉复选框通过使用特定的jQuery插件,可以方便地为网页增加多选功能的下拉列表,提高用户交互体验。同时,插件通常提供了丰富的配置选项和扩展功能,使得定制化变得更加容易。在开发过程中,...
本篇文章将详细探讨jQuery中的复选框组件,特别是基于jQuery UI的Multiselect插件。 ### jQuery 复选框基础 在HTML中,复选框通常使用`<input type="checkbox">`标签创建。jQuery允许开发者通过选择器(Selectors...
总的来说,js下拉复选框控件是提升网页交互体验的有效工具,而jQuery UI的多选框插件则为开发者提供了一个强大且灵活的解决方案。通过深入理解和熟练运用这些工具,可以创建出既美观又实用的用户界面。
`jqueryUi.multiselect`是一个基于jQuery UI库的下拉框多选插件,它提供了一种美观且易于使用的多选方式,通过复选框的形式展示选项,使得用户可以快速勾选或取消多个选项。由于在GitHub上找到的完整版本较少,...
Mutiselect是一个流行的jQuery插件,它提供了美观的多选下拉效果。它可能包含了自定义样式、搜索过滤、分页等功能,使得用户在大量选项中更容易找到并选择所需项。 5. **JqueryMultiselect2017**: 这可能是另一...
在网页设计和开发中,"下拉复选框"是一种常用的交互元素,它结合了下拉菜单和复选框的功能,允许用户在一个列表中选择一个或多个选项。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及动画效果...
"前端项目-jquery-ui-multiselect-widget.zip" 提供了一个强大的工具,它是一个基于jQuery UI库的多选下拉列表插件,名为jQuery UI Multiselect Widget。这个插件能够将普通的多选输入框转化为一个美观且功能丰富的...
在本项目中,我们探讨的是如何使用纯JavaScript实现一个功能丰富的下拉多选框,而不是依赖于像jQuery这样的库,尤其是jQuery的multiselect插件。 首先,让我们了解下拉多选框(Dropdown)和复选框(Checkbox)的...
4. `jquery.bgiframe.js`:这是一个jQuery插件,主要用于解决在IE6和IE7下浮动元素与背景图片重叠的问题,确保多选框在这些旧版浏览器中的正确显示。 5. `前端页面.text`:这个文件很可能包含了一个或多个示例页面...
5. **CSS和JavaScript集成**:将jQuery插件与页面上的其他元素和样式结合,可能需要调整CSS以适应新的多选下拉框样式,同时确保JavaScript正确加载并调用了插件初始化方法。 6. **跨浏览器兼容性**:因为提到插件...
在多选模式下,用户可以同时选择多个选项,这对于需要处理复选数据的场景非常有用。同时,插件还提供了便捷的方法来获取或设置已选中的值,方便开发者在后端或前端处理这些数据。 此外,jQselectable也具备良好的可...
5. **单选和复选**:jQuery MultiSelect 支持单选模式,即一次只能选择一个选项,同时也支持复选模式,允许多个选项同时被选中。 6. **事件监听**:该插件提供了一系列的事件,如`change`、`open`、`close`等,使得...
该插件通过JavaScript和jQuery库来实现,允许用户在下拉菜单中进行多项选择,并可以以复选框的形式显示这些选项。 1. **安装与引入** 首先,你需要在项目中引入Bootstrap的基础CSS和JS文件,以及jQuery库。然后,...
标题“jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)”和描述“Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。下文给大家介绍jQuery使用Selectator插件实现多选下拉列表过滤框,...
7. **jQuery插件或库** 如果项目已经使用了jQuery,可以考虑使用现有的插件,如`multiselect.js`或`select2`,它们提供了预封装的多选下拉框解决方案。 以上就是关于“html多选下拉框,CheckBox的Select组件”的...