bootstrap select下拉框動態數據

來源於    https://blog.csdn.net/jokewinl/article/details/88355857

需引入bootstrap-select.js和bootstrap-select.min.css，地址:https://gitee.com/jolone/source.git

select class=“selectpicker” multiple selectpicker和multiple屬性的搭配使用可實現多選
data-live-search=“true” 這個屬性的默認值是false,作用是打開模糊篩查搜索框。
data-max-options 這個屬性表示最多可選幾個，搭配multiple使用，
data-selected-text-forma縮略模式， 用法：data-selected-text-format=“count > 3”，
當選中值大於3個的時候只顯示選中項的個數，注意只對多選生效。
data-style 表示默認選中樣式，
data-size data-size=“6”,表示下拉框顯示的下拉列表數量。
data-dropup-auto=“false”， 表示下拉框默認向下展開；“true”，表示下拉框默認向下展開；

<li>
            <label class="label_name" th:text="${model.customer}"></label>
            <div class='col-xs-8 col-sm-8'>
                <select id ="customer"class="selectpicker" data-live-search="true">
                    <option data-tokens="ketchup mustard" value="0" th:text="${model.selectCustomer}"></option>
                </select>
            </div>
        </li>

 //檢索客戶
    $("#customer").on('shown.bs.select',function(e){
        var deviceStr="" ;
        $.ajax({
            type: "GET",
            url: "cuSelectCustomer",
            data: {},
            async: false,
            dataType: "json",
            success: function (result) {
                if (result.ok) {
                    for (var i = 0; i < result.data.length; i ++){
                         deviceStr+='<option  value="' + result.data[i].customerId + '">' +result.data[i].name + '</option>';
                    }
                }
            },
            error: function (XMLHttpRequest) {
                layer.alert(messages.systemE, {
                    title: messages.promptBox,
                    icon: 0,
                    btn: messages.btn,
                });
                // alert("error" + XMLHttpRequest.readyState);
            }

        });
        $("#customer").html("");
        $('#customer').append(deviceStr);
        $('#customer').selectpicker('refresh');
    });