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

最新推荐文章于 2025-11-12 09:54:44 发布

最新推荐文章于 2025-11-12 09:54:44 发布 · 552 阅读

文章标签：

#jquery #multiSelect插件 #使用 #ViewUI

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用 jQuery multiSelect 插件实现下拉多选功能。通过一个实例展示了必要的文件引入及 HTML 结构，并提供了 JavaScript 初始化代码，实现选项的全选与提示。

上网找了一下下拉多选方面的插件，其中发现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("请选择");
		}
	});
	
});

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

效果图片如下附件