源代码

主页

<select class="form-control" id="jobGroup" >
	<#list JobGroupList as group>
		<option value="${group.id}" <#if jobGroup==group.id>selected</#if> >${group.title}</option>
	</#list>
</select>

模态框

<div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
  ...
  <select class="form-control" id="jobGroupAdd" >
  	<#list JobGroupList as group>
  		<option value="${group.id}" <#if jobGroup==group.id>selected</#if> >${group.title}</option>
  	</#list>
  </select>
  ...
</div>

JS实现

引入：select2

<link href="${request.contextPath}/static/plugins/select2/select2.min.css" rel="stylesheet" />
<script src="${request.contextPath}/static/plugins/select2/select2.min.js"></script>

增加js，在页面加载完成时重写select

$('#jobGroup').select2();
$('#jobGroupAdd').select2();

问题

搜索失效

模态框select2下拉框不能搜索，使用模态框，一般都会自动带上一个属性， tabindex=“-1” ,因为这个属性的存在，导致select2的搜索框无法输入，去掉这个属性即可解决
html中tabindex属性可以设置键盘中的TAB键在控件中的移动顺序，即焦点顺序

宽度问题

模态框中的select2下拉框很窄，增加宽度属性

$('#jobGroupAdd').select2({
  width: '100%'
});