一. 引入
1. 引入css文件
javascript"><th:block th:include="include :: select2-css" />
2. 引入js文件
<th:block th:include="include :: select2-js"/>
3. select标签引入class
class="form-control select2-multiple"
2. 实例
我是在项目搜索框部分要加一个下拉框，本来甚至不需要上面那么多引入，都可以有一个下拉框，但是要求点击可以出现输入框自定义输入来筛选，然后想到了这个。但是想要利用表单来实现，因为不是一种表单，所以样式混乱。
水平排列的表单
通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
< input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>
这种是在整个提交表单可以很方便地用这个就可以。但是我搜索栏，div排布是这样的：
<div class="select-list">
<ul>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
然后我只是想在某个li下采用下拉框选择搜索。就不适用了。不过最终还是摸索出来了。
搜索框下拉选择
<head>
<th:block th:include="include :: header('操作日志')" />
<th:block th:include="include :: select2-css" />
</head>
<body>
<div class="container-div">
<div class="row">
<div class="col-sm-12 search-collapse">
<form id="formId">
<div class="select-list">
<ul>
<li><!--yyyy-MM-dd-->
<p style="width: auto"><label class="language_label">Select_time</label>：</p>
<input class="form-control" name="startTime" id="startTime" placeholder="yyyy-MM-dd HH:mm:ss">
</li>
<li>
<p style="text-align: left;width: 5px">~</p>
<input class="form-control" name="endTime" id="endTime" placeholder="yyyy-MM-dd HH:mm:ss">
</li>
<li>
<p style="width: auto"><label class="language_label">Operator_description</label>：</p>
<input type="text" name="description"/>
</li>
<li>
<p style="width: auto"><label class="language_label">Device_sn</label>：</p>
<input type="text" name="dsn"/>
</li>
<li style="width: 300px;list-style: none">
<p style="width: auto"><label class="language_label">Operator_people</label>：</p>
<div class="col-sm-8">
<select id="a***ounts" name="name" class="form-control select2-multiple">
<option value="" class="language_label">All</option>
<option class="language_label" th:each="a***ount:${a***ounts}" th:value="${a***ount.name}"
th:text="${a***ount.name}"></option>
</select>
</div>
</li>
<li>
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> <label class="language_label">Search</label></a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="resetPre()"><i class="fa fa-refresh"></i> <label class="language_label">Reset</label></a>
</li>
</ul>
</div>
</form>
</div>
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js"/>
</body>
<script th:inline="javascript">
var a***ounts = [[${a***ounts}]];
$(function() {
$('#a***ounts').select2({
'width': '200px'
});
}
</script>
注意点：① 给<li>设置了宽度:
<li style=“width: 300px;list-style: none”>
② 对select使用了栅格：
<div class=“col-sm-8”>
③ 给select设置了宽度：
$(‘#a***ounts’).select2({
‘width’: ‘200px’
});
效果
记录一下~
