上网找了一下下拉多选方面的插件,其中发现jquery.multiSelect是比较容易使用的一款,具体在文件附件里
下面用一个小例子说明一下:
需要在页面中引入这些文件,jquery.js,jquery.bgiframe.min.js,jquery.multiSelect.js,jquery.multiSelect.css
html片段:
<form id="companyTypeForm" method="post" name="companyTypeForm" action="companyType.do?method=save">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>类型名称:</td>
<td>
<input type="text" name="name" />
</td>
<td>拥有角色:</td>
<td>
<select id="roleIds" name="roleIds" style="width:180px" multiple="multiple">
<c:forEach items="${roleList }" var="role">
<option value="${role.id }">${role.name }</option>
</c:forEach>
</select>
<font color="red" id="errRed"></font>
</td>
</tr>
<tr>
<td colspan="4">
<input name="save" type="submit" value="保存" />
<input name="reset" type="reset" value="重置" />
</td>
</tr>
</table>
</form>
js片段:
$(document).ready( function() {
$("#roleIds").multiSelect({
selectAll: false,
oneOrMoreSelected: '*',
selectAllText: '全选',
noneSelected: '请选择'
}, function(){ //回调函数
if($("[name='roleIds']:checked").length > 0)
{
$("#errRed").empty();
}
else
{
$("#errRed").text("请选择");
}
});
});
就这么简单的就用起来了!
效果图片如下附件
- 大小: 17.2 KB
分享到:
相关推荐
jQuery Multiselect插件,正如其名,为开发者提供了一个功能强大的下拉多选解决方案,它使得复选框在有限的空间内展现得既美观又实用。这个插件不仅提升了用户体验,同时也简化了开发者的代码实现,让复杂的多选功能...
3. `jquery.multiSelect.html`:这是一个演示文件,包含了一个基本的示例,展示了如何在实际项目中使用该插件。开发者可以通过查看此文件了解插件的基本用法。 4. `jquery-1.3.2.js`:这是jQuery库的核心文件,是...
为此,jQuery提供了一个强大的多选下拉列表插件——jQuery Multiselect。该插件不仅使多选下拉列表更加美观,还提供了丰富的功能和自定义选项,极大地提升了用户体验。 ### 1. 插件介绍 jQuery Multiselect是由...
《自己封装好的下拉框多选插件jqueryUi.multiselect》 在Web开发中,交互性和用户体验是至关重要的,而下拉框多选插件在数据筛选、信息选择等方面起着重要作用。`jqueryUi.multiselect`就是这样一个插件,它为用户...
该插件的核心文件包括`jquery.multiselect.filter.js`和`jquery.multiselect.filter.css`。前者是JavaScript代码,负责插件的主要逻辑和交互功能,后者则是CSS样式文件,用于定义插件的视觉样式和布局。 首先,我们...
这时,jQuery.multiselect.js插件就派上了用场,它提供了一个强大且易于定制的多选下拉框解决方案。 一、jQuery.multiselect.js简介 jQuery.multiselect.js是基于流行的JavaScript库jQuery构建的,它扩展了...
`jquery.multiSelect`是基于jQuery的一个插件,它为网页中的下拉选择框提供了多选功能,使得用户可以方便地从多个选项中进行选择。这个插件通过提供自定义样式和交互性,提升了用户体验。 ### 1. jQuery多选下拉框...
本示例中,我们关注的是一个使用jQuery实现的多选下拉框插件,这个插件能够帮助开发者轻松地在项目中创建具有美观样式和易用功能的多选下拉框。 首先,jQuery是一个强大的JavaScript库,它简化了JavaScript的DOM...
<link rel="stylesheet" href="jquery-ui.multiselect.css"> <!-- 初始化插件 --> $(function() { $("select[multiple]").multiselect({ // 配置项... }); }); ``` ### 3. 配置项 jQuery UI Multiselect ...
标题 "自己动手增强 jQuery.multiselect2side 调用" 提到的是一个关于自定义和扩展 jQuery 多选下拉插件 `jQuery.multiselect2side` 的实践过程。这个插件通常用于创建一种分栏显示的多选下拉列表,方便用户在两个...
对jquery的下拉框插件multiselect进行源码修改 ,实现下拉多选
《jQuery 下拉多选插件开发详解》 在Web开发中,下拉多选框(Dropdown Multiselect)是一种常见的交互元素,它允许用户在下拉菜单中选择多个选项。jQuery库以其简洁的API和强大的功能,成为了实现此类交互的理想...
然后,下载 `jquery_multiselect` 压缩包,解压后将 `jquery.multiselect.js` 和相应的 CSS 文件(如 `jquery.multiselect.css`)添加到你的项目资源目录中。在 HTML 页面中,添加 `<script>` 和 `<link>` 标签引入...
总的来说,MaxCombobox是一个功能强大且设计美观的jQuery下拉插件,集成了多选、单选和模糊查询等功能,是提升网页表单交互体验的优秀工具。无论是在小型项目还是大型应用中,它都能提供出色的表现。
jQuery Multiselect是一款基于jQuery UI库的插件,用于创建功能丰富的多选下拉列表。这款插件提供了多种特性,使得在网页中实现复杂的下拉列表交互变得更加便捷。以下是对jQuery Multiselect功能的详细介绍: 1. **...
核心文件通常包括CSS样式表(如`multiselect.css`)和JavaScript脚本(如`jquery.multiselect.js`或`jquery.multiselect.min.js`)。我们需要在网页中引用这些资源,以确保插件正常工作。 安装完成后,我们可以通过...
1. **jQuery 多选插件**: jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理以及AJAX交互。在jQuery的基础上,开发者创建了许多插件来增强网页的交互性。"mutiselect"和"JqueryMultiselect2017"就是这样的...
在本文中,我们将深入探讨如何使用jQuery UI Multiselect插件来实现下拉多选checkbox的效果。这个插件是jQuery库的一个扩展,它为用户界面添加了一个功能丰富的多选下拉框,提供了美观且用户友好的多选选项。 首先...