bootstrap-select簡單使用

先下載bootstrap-select，並添加到項目中，然后在頁面引用

<link href="{% static 'css/bootstrap-select.min.css'  %}" rel="stylesheet">
<script src="{% static 'js/bootstrap-select.min.js' %}"></script>

也可以用在線cdn先測試，因為bootstrap-select對jQuery版本和bootstrap版本都有要求
前端代碼如下：

<div class="form-group">
　　<label for="firstname" class="col-sm-3 control-label">測試人員</label>
　　<div class="col-sm-7">
　　　　<select class="col-lg-6 form-control" id="tester" name="tester" title="請選擇測試人員" data-live-search="true"></select>
　　</div>
</div>

注意：一定要有 data-live-search="true"這個屬性，意思是可搜索，title表示不默認選中，相當於input框的holdplace提示語

頁面加載時調用后端接口填充下拉框：

function users() {
        $.ajax({
            type: "GET",
            url: "{% url 'users' %}",
            success: function (data) {
                for (let i = 0; i < data.rows.length; i++) {
                    let jsonObj = data.rows[i];
                    $("#tester").append("<option value='" + jsonObj.id + "'>" + jsonObj.name + "</option>");
                    {# 一定要有這兩步驟，否則頁面顯示下拉列表內容為空，但html源碼中已經填充 #}
                    $('#tester').selectpicker('refresh');
                    $('#tester').selectpicker('render');
                }
            }
        })
    } 

看下頁面效果：

編輯時回填使用：

{# 回填數據，performance_test_info_data.tester為選中項value的值#}
$("#tester").selectpicker('val', performance_test_info_data.tester);
$("#tester").selectpicker('refresh');