bootstrap-select外掛的使用、注意事項、功能實現等

阿新 • • 發佈：2019-01-15

官方文件：http://silviomoreto.github.io/bootstrap-select/examples/
注意事項1：該外掛的單選框不能設定title，也就是滑鼠停在option上面，title失效 https://blog.csdn.net/ya_1249463314/article/details/80665302
解決方案：
1.在《select title="請選擇使用者" 》
2.第一個option設定值《option value="0" 》請選擇使用者《/option》

注意事項2：該外掛需要bootstrap-3.3.7極其以後的版本, 否則的話，功能不會完全展示，如勾選option，引入3.3.7之前版本的bootstrap是沒有顯示打勾的。

注意事項3：該外掛需要結合HTML5，至於怎麼區分是不是HMTL5，很簡單，在html文字開頭部分（<html>標籤之前）寫<!DOCTYPE html>即視為HTML5，開頭部分若不寫DOCTYPE或者是<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">是為非HTML5 ,所以，html開頭部分需要更改為<!DOCTYPE htm>，若非HTML5引用該外掛會有一些問題存在，如下拉框間距過小，勾選按鈕不顯示等系列問題。

$.ajax({
      type: "POST",
      url: "cascade.jsp?method=3",
      data: {
            fuserId:$(this).val()//傳參
      },
      timeout: 60000, // 設定超時時間 1000ms = 1s
      dataType: "json",
      beforeSend: function (xhr) {
            $("#loading_").css("display","block"); // 資料載入成功之前，使用loading元件（把loading.gif顯示出來即可）

      },
      success: function(data) {
           if(data.flag){
                var list = JSON.parse(data.list);
var roleIds = new Array();//1.new 一個數組
                for(var j in list){
                     var role = list[j];//Dept物件
                     //勾選使用者所屬的組
                     if(role.userRoleId==role.allRoleId){
                          if(role.f_useOrNot!=1&&role.f_useOrNot!=""){
                               select.append('《option disabled="disabled" value="'+role.allRoleId+'"》'+role.roleName+'《/option》');
                          }else{
                               //設定selected="selected"是無效的，所以設定selected="selected"就是無用功
                               //select.append('《option selected="selected" value="'+role.allRoleId+'"》'+role.roleName+'《/option》');
                               select.append('《option value="'+role.allRoleId+'"》'+role.roleName+'《/option》');
roleIds.push(role.allRoleId);//2.將需要選中的option的value值push到陣列
                          }
                      }
                      //拼接其他組，不勾選
                      else{
                           if(role.f_useOrNot!=1&&role.f_useOrNot!=""){
                                select.append('《option disabled="disabled" value="'+role.allRoleId+'"》'+role.roleName+'《/option》');
                           }else{
                                select.append('《option value="'+role.allRoleId+'"》'+role.roleName+'《/option》');
                           }
                      }
            }//for迴圈結束

$('#sel_userGroup').selectpicker('val', roleIds); //3.bootstrap外掛設定選中（如<select id="sel_userGroup" ></select> )             $('#sel_userGroup').selectpicker('refresh'); //4.重新整理selectoption狀態
           $("#loading_").css("display","none"); //拼接完成，關閉載入外掛（我這裡的#loading_是一張gif圖片，可以自行下載素材，載入的時候，把載入中的圖片顯示出來即可）
           }else{
                alert("Error,引數錯誤【fuserId】");
                $("#loading_").css("display","none");
                return;
           }
      },
      error: function (XMLHttpRequest, textStatus, errorThrown,xhr) {
           if(textStatus=="timeout"){
                alert(" 請求超時，請重新載入")
                $("#loading_").css("display","none");return;
           }else{
                alert("XMLHttpRequest.status:"+XMLHttpRequest.status+"\n"+"XMLHttpRequest.readyState:"+XMLHttpRequest.readyState+"\n" +"textStatus:"+textStatus);
                $("#loading_").css("display","none");return //
           }
      }
      })

例1.選擇/取消選擇所有選項

例1程式碼：

<select class="selectpicker" multiple data-actions-box="true">
  <option value="1">廣東省</option>
    <option value="2">廣西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山東省</option> 
</select>

例2.普通單選

例2程式碼：

<select class="selectpicker">
    <option value="1">廣東省</option>
    <option value="2">廣西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山東省</option>                            
</select>

例3.帶搜尋單選

例3程式碼：

<select class="selectpicker" data-live-search="true">
    <option value="1">廣東省</option>
    <option value="2">廣西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山東省</option>                            
</select>

例4.多選：

例4程式碼：

<select class="selectpicker" multiple data-live-search="true">
    <option value="1">廣東省</option>
    <option value="2">廣西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山東省</option>                            
</select>

例5.包含組的多選：

例5程式碼：

<div style="width:220px;height:35px;"> <!-- select父div寬度決定select外掛寬度 -->
<select class="form-control selectpicker" data-live-search="true" multiple>
        <optgroup label="廣東省">
                <option value="1">廣州市</option>
                <option value="2">深圳市</option>
                <option value="3">珠海市</option>
         </optgroup>   
          <optgroup label="廣西">
                  <option value="1">南寧市</option>
                  <option value="2">柳州</option>
                  <option value="3">桂林市</option>
           </optgroup>  
           <optgroup label="山東">
                   <option value="1">煙臺</option>
                   <option value="2">青島</option>
                   <option value="3">濟南</option>
             </optgroup>                          
</select>
</div>

例6：帶樣式選擇

例6程式碼：

<select class="form-control selectpicker" data-style="btn-primary" title="請選擇省份" multiple>
                        <option data-content="<span class='label label-success'>廣東省</span>">廣東省</option>    
                        <option data-content="<span class='label label-info'>廣西省</span>">廣西省</option>  
                        <option data-content="<span class='label label-warning'>福建省</span>">福建省</option>  
                        <option data-content="<span class='label label-danger'>山東省</span>">山東省</option>                        
</select>

其中：data-type有幾種型別，分別是：

data-style="btn-success" 綠色

data-style="btn-primary" 藍色

data-style="btn-info" 淺藍

data-style="btn-warning" 黃色

data-style="btn-danger" 紅色

描述的差不多了，該外掛本人考慮過很多東西，如若您有什麼想實現卻想不到方法的可以聯絡本人

（郵箱：[email protected]），我知道的話肯定會告訴你的.。希望以上能幫到您。

bootstrap-select外掛的使用、注意事項、功能實現等

bootstrap-select外掛的使用、注意事項、功能實現等

compass的安裝及使用，以及常見命令列指令與注意事項、Compass核心模組

jekins自動部署tomcat注意事項、連線tomcat報錯

MongoDB 索引的建立注意事項、以及建索引導致鎖庫的解決方案

bootstrap-select外掛實現下拉框搜尋功能

Mysql索引命令、優缺點、注意事項

spring 註解注意事項、值的接受傳遞不同方式

bootstrap js外掛篇——提示框、彈出框、警告框

HI3518E板子啟動流程截圖、注意事項

Android模擬器（Android Emulator ）使用的快捷鍵、引數、注意事項

C#Winform開啟窗體的幾種方法、注意事項的總結

移動端開發注意事項、需要注意的問題、特殊屬性、精靈圖、座固定有自適應的佈局

詳解箭頭函式和普通函式的區別以及箭頭函式的注意事項、不適用場景

設計模式：橋接模式及程式碼示例、橋接模式在jdbc中的體現、注意事項

bootstrap-select外掛的使用

asp.net mvc DropDownList控制元件資料庫中取值Select的選項注意事項

bootstrap-select 外掛ajax動態新增選項

檔案上傳那些事兒：多圖上傳、大檔案上傳、斷點續傳功能實現與分析

BaiduMap SDK-百度地圖的縮放、旋轉和俯視功能實現

微信掃碼支付，掃商戶二維碼後，輸入金額支付 php原始碼下載類似閃惠、到店付功能實現教程和原始碼

bootstrap-select外掛的使用、注意事項、功能實現等

相關推薦