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');