下拉多选插件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("请选择");
		}
	});
	
});

 就这么简单的就用起来了！

 

效果图片如下附件

 

 

评论

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  

求教一下：这个插件可以实现全选，可是无法取消全部选择???

可否告之一下，[e-mail]

2 楼 joyceyeah 2012-07-27  

资源不错

1 楼 紫色的箭 2012-07-16  

，还不错，帮助我实现了想要的功能！！！3q