`
望月怀远
  • 浏览: 57789 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

下拉多选插件jquery.multiSelect的使用

阅读更多

上网找了一下下拉多选方面的插件,其中发现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
2
5
分享到:
评论
8 楼 nbh219 2015-11-26  
请问,在单选的时候 默认是选中第一个,怎么去掉
7 楼 Lonely_Hill 2015-03-31  
请问,multiSelect怎么重置呢?
6 楼 renshiqiang123 2014-11-24  
LZ  为什么两个多选下拉框就不好使了呢
5 楼 liujiaoshui 2013-02-22  
怎么实现角色拥有的权限选项,在有前面checkbox的select中,能默认选中?没有权限则不能选中。能拿到得数据所有权限的list:roleList,角色拥有的权限list:roleOwnList
4 楼 liujiaoshui 2013-02-22  
还不错啊,真的
3 楼 Denni 2012-07-27  
求教一下:这个插件可以实现全选,可是无法取消全部选择???

可否告之一下,4830669@qq.com
2 楼 joyceyeah 2012-07-27  
资源不错
1 楼 紫色的箭 2012-07-16  
,还不错,帮助我实现了想要的功能!!!3q

相关推荐

    jquery.multiselect 下拉多选插件 下拉复选框插件

    jQuery Multiselect插件,正如其名,为开发者提供了一个功能强大的下拉多选解决方案,它使得复选框在有限的空间内展现得既美观又实用。这个插件不仅提升了用户体验,同时也简化了开发者的代码实现,让复杂的多选功能...

    jquery.multiSelect下拉多选

    3. `jquery.multiSelect.html`:这是一个演示文件,包含了一个基本的示例,展示了如何在实际项目中使用该插件。开发者可以通过查看此文件了解插件的基本用法。 4. `jquery-1.3.2.js`:这是jQuery库的核心文件,是...

    Jquery多选下拉列表插件jquery multiselect

    为此,jQuery提供了一个强大的多选下拉列表插件——jQuery Multiselect。该插件不仅使多选下拉列表更加美观,还提供了丰富的功能和自定义选项,极大地提升了用户体验。 ### 1. 插件介绍 jQuery Multiselect是由...

    自己封装好的下拉框多选插件jqueryUi.multiselect

    《自己封装好的下拉框多选插件jqueryUi.multiselect》 在Web开发中,交互性和用户体验是至关重要的,而下拉框多选插件在数据筛选、信息选择等方面起着重要作用。`jqueryUi.multiselect`就是这样一个插件,它为用户...

    jquery.multiselect.filter.zip

    该插件的核心文件包括`jquery.multiselect.filter.js`和`jquery.multiselect.filter.css`。前者是JavaScript代码,负责插件的主要逻辑和交互功能,后者则是CSS样式文件,用于定义插件的视觉样式和布局。 首先,我们...

    jquery.multiselect.js多选下拉框选择代码

    这时,jQuery.multiselect.js插件就派上了用场,它提供了一个强大且易于定制的多选下拉框解决方案。 一、jQuery.multiselect.js简介 jQuery.multiselect.js是基于流行的JavaScript库jQuery构建的,它扩展了...

    jquery.multiSelect多选下拉框简单实例

    `jquery.multiSelect`是基于jQuery的一个插件,它为网页中的下拉选择框提供了多选功能,使得用户可以方便地从多个选项中进行选择。这个插件通过提供自定义样式和交互性,提升了用户体验。 ### 1. jQuery多选下拉框...

    jQuery多选下拉框插件.rar

    本示例中,我们关注的是一个使用jQuery实现的多选下拉框插件,这个插件能够帮助开发者轻松地在项目中创建具有美观样式和易用功能的多选下拉框。 首先,jQuery是一个强大的JavaScript库,它简化了JavaScript的DOM...

    jQuery UI Multiselect (jQuery UI 多选框)

    &lt;link rel="stylesheet" href="jquery-ui.multiselect.css"&gt; &lt;!-- 初始化插件 --&gt; $(function() { $("select[multiple]").multiselect({ // 配置项... }); }); ``` ### 3. 配置项 jQuery UI Multiselect ...

    自己动手增强 jquery.multiselect2side 调用

    标题 "自己动手增强 jQuery.multiselect2side 调用" 提到的是一个关于自定义和扩展 jQuery 多选下拉插件 `jQuery.multiselect2side` 的实践过程。这个插件通常用于创建一种分栏显示的多选下拉列表,方便用户在两个...

    jquery.multiSelect.js

    对jquery的下拉框插件multiselect进行源码修改 ,实现下拉多选

    jquery-下拉多选.tar.gz

    《jQuery 下拉多选插件开发详解》 在Web开发中,下拉多选框(Dropdown Multiselect)是一种常见的交互元素,它允许用户在下拉菜单中选择多个选项。jQuery库以其简洁的API和强大的功能,成为了实现此类交互的理想...

    多选下拉框(jquery_multiselect)

    然后,下载 `jquery_multiselect` 压缩包,解压后将 `jquery.multiselect.js` 和相应的 CSS 文件(如 `jquery.multiselect.css`)添加到你的项目资源目录中。在 HTML 页面中,添加 `&lt;script&gt;` 和 `&lt;link&gt;` 标签引入...

    Juqery插件,下拉,支持多选,单选,模糊查询

    总的来说,MaxCombobox是一个功能强大且设计美观的jQuery下拉插件,集成了多选、单选和模糊查询等功能,是提升网页表单交互体验的优秀工具。无论是在小型项目还是大型应用中,它都能提供出色的表现。

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    jQuery Multiselect是一款基于jQuery UI库的插件,用于创建功能丰富的多选下拉列表。这款插件提供了多种特性,使得在网页中实现复杂的下拉列表交互变得更加便捷。以下是对jQuery Multiselect功能的详细介绍: 1. **...

    jquery实现的多选下拉框

    核心文件通常包括CSS样式表(如`multiselect.css`)和JavaScript脚本(如`jquery.multiselect.js`或`jquery.multiselect.min.js`)。我们需要在网页中引用这些资源,以确保插件正常工作。 安装完成后,我们可以通过...

    可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo

    1. **jQuery 多选插件**: jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理以及AJAX交互。在jQuery的基础上,开发者创建了许多插件来增强网页的交互性。"mutiselect"和"JqueryMultiselect2017"就是这样的...

    jquery插件实现下拉多选checkbox的效果

    在本文中,我们将深入探讨如何使用jQuery UI Multiselect插件来实现下拉多选checkbox的效果。这个插件是jQuery库的一个扩展,它为用户界面添加了一个功能丰富的多选下拉框,提供了美观且用户友好的多选选项。 首先...

Global site tag (gtag.js) - Google Analytics