bootstrap-select用法詳解

首先需要引入

 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>

用法

　　<select id="usertype" style="width: 257px;" name="usertype" class="selectpicker show-tick" title="請選擇" multiple data-live-search="false">

　　　　　　<opinion>此opinion可以用ajax動態加載</opinion>　　　　

　　</select>

        $.ajax({ 

type:"POST",
cache:false,
url : "${ctx}/sys/user/selectTree",
async:true,
success : function(data){
　　$.each(data, function (i) {
　　　　$('#usertype.selectpicker').append("<option value=" + data[i].ID + ">" + data[i].NAME + "</option>");
　　});
　　$('#usertype').selectpicker('refresh');
},

});

如果需要初始化默認選中的話，可以用Ajax進行賦值

 

success : function(data){
　　var selected = new Array();
　　$.each(JSON.parse(data), function (i,obj) {
　　　　selected.push(obj.BASEID);
　　});
　　console.log("selected",selected)
　　$('#usertype').selectpicker('val', selected);//默認選中
　　$('#usertype').selectpicker('refresh');
}

JSON.parse的作用是：jquery each報 Uncaught TypeError: Cannot use 'in' operator to search for錯誤時，

在寫前端的時候用jquery來遍歷后台傳來的json數組時候遇到這個錯誤：Uncaught TypeError: Cannot use 'in' operator to search for。

后來查到原因是因為：一部分瀏覽器后端傳過來的是json對象，但是我們前端是需要Javascript的對象，所以需要做個轉換JSON.parse() or jQuery $.parseJSON