bootstrap select插件 下拉框 、复选框 、使用详解、附.重置 bootstrap-select下拉框复选框中的值/easyui树的复选框中的值。

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/fzy198926/article/details/79242385

jsp代码

<form id="permForm" method="post"

   action="${path}/workorder/workListStatistics/${branchCode}">

<div class="row-fluid" style="margin-top: 26px;">

<div class="new_span3">

<div class="new_span3">

<div style="margin-top: 10px; margin-right: -19px;">坐席工号：</div>

</div>

<div class="new_span3">

<label> 

<select id="agentEmpcode" name="agentEmpcode" class="selectpicker show-tick form-control" data-width="fit" multiple data-live-search="false" style="width: 600px; height: 30px;">

<c:forEach items="${agents}" var="agents">

<option value="${agents.agentEmpcode}"

<c:if test="${fn:contains(agentEmpcode, agents.agentEmpcode)==true}">selected</c:if>>${agents.agentEmpcode}</option>

</c:forEach>

</select>

</label>

</div>

</div>

<div class="new_span3">

<div class="new_span3" style="width: 100px">

<div style="margin-left: -150px; margin-top: 10px;">座席姓名：</div>

</div>

<div class="new_span3">

<label style="margin-left: -175px;"> <select

id="agentRealname" name="agentRealname"

class="selectpicker show-tick form-control" data-width="fit"

multiple data-live-search="false"

style="width: 150px; height: 30px;">

<c:forEach items="${agents}" var="agents">

<option  value="${agents.agentRealname}"

<c:if test="${fn:contains(agentRealname, agents.agentRealname)==true}">selected</c:if>>${agents.agentRealname}</option>

</c:forEach>

</select>

</label>

</div>

</div>

<div class="new_span3" style="width: 320px">

<div class="new_span3" style="width: 80px">

<div style="margin-left: -290px; margin-top: 10px;">工单类型：

</div>

</div>

<div class="new_span3">

<label style="margin-left: -282px;"> <select

class="easyui-combotree" id="typeId" name="typeId"

data-options="checkbox:true,multiple:true"

style="width: 200px; height: 30px"></select>

</label>

</div>

</div>

<div class="n3_span3"

style="float: left; width: 7%; margin-left: 22px; margin-right: 130px; position: relative;">

<div class="n3_span3"

style="width: 112px; MARGIN-LEFT: -232px; margin-top: 10px;">创建开始时间：</div>

<div class="n3_span3">

<input type="text" name="startTime" id="startTime"

value="<fmt:formatDate value="${startTime}" pattern="yyyy-MM-dd  HH:mm:ss"/>"

onClick="WdatePicker({maxDate:'#F{$dp.$D(\'endTime\')}',dateFmt:'yyyy-MM-dd HH:mm:ss'})"

style="width: 150px; height: 25px; margin-top: -1px; margin-left: -118px;">

</div>

</div>

<div class="n3_span3" style="float: left;">

<div class="n3_span3"

style="margin-left: 1165px; margin-top: -36px;">创建结束时间：</div>

<div class="n3_span3">

<input type="text" name="endTime" id="endTime"

value="<fmt:formatDate value="${endTime}"  pattern="yyyy-MM-dd  HH:mm:ss"/>"

onClick="WdatePicker({minDate:'#F{$dp.$D(\'startTime\')}',dateFmt:'yyyy-MM-dd HH:mm:ss'})"

style="width: 150px; height: 25px; margin-left: 1261px; margin-top: -71px;">

</div>

</div>

</div>

<div class="row-fluid" style="margin-left: -22px;">

<div class="span2" style="float: right">

<button id="workListStatistics" class="btn btn-primary"

type="button" data-toggle="modal" onclick="search()">搜索</button>

<button class="btn btn-primary" type="button"

onclick="formReset()" data-toggle="modal">重置</button>

<button class="btn btn-primary" type="button"

onclick="exportOrderStatisticsList('${branchCode}')" data-toggle="modal">导出</button>

</div>

</div>

</form>

</div>

1.引入js插件在js里面。

2.jsp页面引入样式和js

3.具体下拉框使用

4. bootstrap-select 重置下拉框复选框中的值

    （4.1）   jsp页面

（4.2）js代码 表单重置

function formReset() {
$("#permForm input").val('');
$("#permForm select").val('');
$("#typeId").combotree("setValues", "");//easyui树插件的下拉框多选框的值重置
        $("#agentRealname").selectpicker('refresh');//对searchPayState这个下拉框进行重置刷新
}