若依 bootstrap-select2 下拉框 分组多选 分组单选

先引入select2的css及js

/*前提是引入jQuery*/
<link href="/ajax/libs/select2/select2.min.css" rel="stylesheet"/>
<link href="/ajax/libs/select2/select2-bootstrap.css" rel="stylesheet"/>



<div class="form-group">
     <label class="font-noraml">分组单选</label>
     <select class="form-control">
       <optgroup label="--请选择开发语言--">
         <option value="Java">Java</option>
         <option value="PHP">PHP</option>
         <option value=".NET">.NET</option>
       </optgroup>
       <optgroup label="--请选择数据库--">
         <option value="Oracle">Oracle</option>
         <option value="Mysql">Mysql</option>
         <option value="Sysbase">Sysbase</option>
       </optgroup>
     </select>
</div>


<div class="form-group">
     <label class="font-noraml">分组多选</label>
     <select class="form-control noselect2 selectpicker">
       <optgroup label="--请选择开发语言--">
         <option value="Java">Java</option>
         <option value="PHP">PHP</option>
         <option value=".NET">.NET</option>
       </optgroup>
       <optgroup label="--请选择数据库--">
         <option value="Oracle">Oracle</option>
         <option value="Mysql">Mysql</option>
         <option value="Sysbase">Sysbase</option>
       </optgroup>
     </select>
</div>



<script src="/ajax/libs/select2/select2.min.js"></script>

动态获取分组数据

<select name="merchantKV" id="merchantKV" class="selectpicker" title="选择客户" data-live-search="true" >
	<optgroup label="--我的--">
		<option th:each="map : ${merchantMapList}" th:text="${map.mapValue}"
				th:value="${map.mapKey}" ></option>
	</optgroup>
	<optgroup label="--其他--">
		<option th:each="map : ${otherMerchantMapList}" th:text="${map.mapValue}"
				th:value="${map.mapKey}" ></option>
	</optgroup>
</select>