基于Bootstrap下拉框插件bootstrap-select使用方法詳解

更新時間：2018年08月07日 15:50:15 作者：蚊蚊蚊蚊蚊170624

這篇文章主要為大家詳細介紹了基于Bootstrap下拉框插件bootstrap-select的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

寫在前面：

在這次的項目中，沒有再使用liger-ui做為前端框架了，改為了Bootstrap,這次也好接觸下新的技術，在學習的過程中發(fā)現(xiàn)，Bootstrap的一些組件基本都是采用class的形式，就是給一個它定義好的樣式，就會給你展現(xiàn)出一個好看的組件出來，這個比liger-ui的界面做的要好，但是了解了Boostrap的基本語法后，發(fā)現(xiàn)在官方的文檔中，并沒有一些可以動態(tài)加載組件的demo,因為之前用的liger-ui，大多數(shù)組件都只需要寫一行代碼，就能很好的，并且很方便的直接與后臺進行交互，并動態(tài)加載數(shù)據(jù)。但是bootstrap的文檔中并沒有這樣的例子。畢竟它就是做靜態(tài)的，只需要給一個樣式，那我動態(tài)加載數(shù)據(jù)怎么辦？全部自己封裝嗎？后面查閱資料發(fā)現(xiàn)，有許多常用的組件插件是基于bootstrap來進行封裝的，這就需要我們如果要使用什么組件，可以單獨的再去下載它的插件。這個時候，就可以做到很方便的像后臺發(fā)送數(shù)據(jù)進行動態(tài)加載了。這里就記錄下，一些常用的bootstrap的組件插件吧，首先是下拉框。

基于Bootstrap的下拉框也有好幾個，這里我選擇了bootstrap-select.js.下面就簡單的記錄下它的用法吧，主要是動態(tài)的加載數(shù)據(jù)。

首先還是上代碼，畢竟代碼最直觀。

前臺jsp頁面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
 String scheme = request.getScheme();
 String serverName = request.getServerName();
 String contextPath = request.getContextPath();
 int port = request.getServerPort();

 //網(wǎng)站的訪問跟路徑
 String baseURL = scheme + "://" + serverName + ":" + port
  + contextPath;
 request.setAttribute("baseURL", baseURL);
 System.out.println("baseURL:" + baseURL);
%>

<html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>bootstrap-select測試</title>
 <%--導入bootstrap與select樣式--%>
 <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" />
 <link href="${baseURL}/Bootstrap/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
 <%--先導入jqury插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
 <%--導入bootstrap插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>
 <%--下拉框插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap-select/js/bootstrap-select.js"></script>
 </head>
 <body>

 <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Role</label>
 <%--給一個class=“selectpicker” 改變下拉框的寬度用data-width --%>
 <select id="sel_role" name="role" class="selectpicker" title="請選擇" data-width="150px" style="">
 </select>
 </body>
<script>
 $(function(){
 //初始化下拉框
 //動態(tài)加載
 $.ajax({
  type: 'get',
  url: '${baseURL}/listAllRole',
  dataType: "json",
  success: function (data) {
  //拼接下拉框
  for(var i=0;i<data.length;i++){
   $("#sel_role").append("<option value='"+data[i].roleId+"'>"+data[i].roleName+"</option>");
  }
  //這一步不要忘記 不然下拉框沒有數(shù)據(jù)
  $("#sel_role").selectpicker("refresh");
  }
 });
 
 });
</script>
</html>

首先要導入相關的樣式以及js插件，由于bootstrap是基于jquery的，故要先導入jquery插件，然后bootstrap-select又是基于bootstrap的。故先導入bootstrap，再導入bootstrap-select.這里要注意下導入的順序呢。

對于動態(tài)的加載數(shù)據(jù)，還是要自己進行拼接，然后refresh一下，這個一定不能忘記，不然不會出來數(shù)據(jù)。由于此次的后臺還是ssh框架，故后臺查詢下拉框的數(shù)據(jù)，并如何返回json給前臺頁面，這里就不再詳細的說了，之前在ligerui博文中都有寫過，并提及過。

看下效果圖吧:

除了常用的單個下拉框外，還有最常見的就是下拉框級聯(lián)了，這里也寫個demo來記錄一下，代碼如下，也是只上前臺jsp頁面的代碼，后臺json數(shù)據(jù)的傳遞就不再說了。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
 String scheme = request.getScheme();
 String serverName = request.getServerName();
 String contextPath = request.getContextPath();
 int port = request.getServerPort();
 //網(wǎng)站的訪問跟路徑
 String baseURL = scheme + "://" + serverName + ":" + port
  + contextPath;
 request.setAttribute("baseURL", baseURL);
 System.out.println("baseURL:" + baseURL);
%>
<html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>bootstrap-select測試</title>
 <%--導入bootstrap與select樣式--%>
 <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" />
 <link href="${baseURL}/Bootstrap/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
 <%--先導入jqury插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
 <%--導入bootstrap插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>
 <%--下拉框插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap-select/js/bootstrap-select.js"></script>
 </head>
 <body>

 <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Biz Unit</label>
 <select id="sel_bizUnit" name="bUnitId" class="selectpicker" title="請選擇" data-width="150px" style="">
 </select>
 &nbsp;&nbsp;&nbsp;
 <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Division</label>
 <select id="sel_division" name="divId" class="selectpicker"title="請選擇" data-width="150px" style="">
 </select>

 </body>
<script>
 $(function(){
 //初始化下一級下拉框
 //動態(tài)加載
 $.ajax({
  type: 'get',
  url: '${baseURL}/listAllSABusinessUnit',
  dataType: "json",
  success: function (data) {
  for(var i=0;i<data.length;i++){
   $("#sel_bizUnit").append("<option value='"+data[i].bUnitId+"'>"+data[i].bUnitName+"</option>");
  }
  $("#sel_bizUnit").selectpicker("refresh");
  }
 });

 //二級下拉框的選項隨一級下拉框的值而改變
 $("#sel_bizUnit").change(function(){
  //根據(jù)bUnit去獲取Division
  $.ajax({
  type: 'get',
  url: '${baseURL}/getSADivisionByBUnit?bUnitId='+$("#sel_bizUnit").val(),
  dataType: "json",
  success: function (data) {
   if(data.length == 0){
   //如果一級沒有對應的二級 則清空二級并 不往下執(zhí)行
   $("#sel_division").empty();
   $("#sel_division").selectpicker("refresh");
   return ;
   }
   //如果一級有對應的二級 則進行拼接
   //每次拼接前都進行清空
   $("#sel_division").empty();
   for(var i=0;i<data.length;i++){
   $("#sel_division").append("<option value='"+data[i].divId+"'>"+data[i].divName+"</option>");
   }
   //這里千萬別忘記了
   $("#sel_division").selectpicker("refresh");
  }
  });
 });
 });
</script>
</html>

代碼都比較簡單，基本看下就會了，也就是根據(jù)一級下拉框的值去查詢獲取對應的二級下拉框的值，然后拼接加載出來就完事了。值得注意的點，當一級沒有對應的二級時，此時也應該將二級清空并refresh一下，不然當?shù)谝淮喂催x一級a，對應有二級，接著再次選擇一級b，沒有對應的二級時，還是會顯示出一級a對應的二級。所以這個時候也應該清空一下。這些小細節(jié)可以按照自己的項目需求來。看下效果圖：