使用select2插件多选存值，多值回显

最新推荐文章于 2025-05-28 16:32:12 发布

无名小仙男

最新推荐文章于 2025-05-28 16:32:12 发布

阅读量3.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： select2 JavaScript

本文链接：https://blog.youkuaiyun.com/zxl8876/article/details/97427737

JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

select2

1 篇文章

订阅专栏

本文介绍如何在网页中使用Select2插件实现多选功能，包括引入资源文件、编写JSP页面代码、取值与回显方法，以及解决回显时遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用select2插件多选存值，多值回显，及遇到的坑~~~~

1.引入js css文件

<link href="${ctxStatic}/jquery-select2/3.4/select2.min.css?v=<%=vs %>" rel="stylesheet" />
<script src="${ctxStatic}/jquery-select2/3.4/select2.min.js" type="text/javascript"></script>

2.jsp页面标签写法

<div>
	<select id="sel_expert" class="form-control" multiple="multiple" 
	onchange="$('#hid_expert').val($('#sel_expert').val());">
		<c:forEach items="${experts }" var="expert">
			<option value="${expert.id }" >${expert.expert_name }</option>
		</c:forEach>
	</select>
	<!-- 用于保存值，传到后台 -->
	<input id="hid_expert" name="expert" value="${expertIds }" type="hidden">
</div>

3.取值、回显

var expertIdsStr = $("#hid_expert").val();// 取值
if (expertIdsStr) {
	var arr = expertIdsStr.split(",");
	$("#sel_expert").select2({
		placeholder : '请选择评价专家',
		maximumSelectionLength:2,
		allowClear : false
	});
	// 回显时，使用以下三种方式都可以
	//.val( arr ).trigger("change");
	//$("#sel_expert").val(arr).trigger("change");
	$("#sel_expert").select2('val', arr);
}

4.回显时需要注意：如果arr中的值，任何一个值都不会与select的option中value值重合，那么即使回显的方法是对的，select2也不会回显。。。
我就是死在了这里。。。数据回显做了好几个小时。。。。在此记录~~~