bootstrap selectpicker控件select下拉框动态

刚开始接触前端,对前端框架很多组件不熟,开始一点一点记录

selectpicker使用方法如下

1、首先需要引入的css和js：

    bootstrap.css
    bootstrap-select.min.css
    jquery-1.11.3.min.js
    bootstrap.min.js
    bootstrap-select.min.js

 2、页面代码

<div class="form-group">
    <label class="col-md-2 control-label">数据源名称</label>
    <div class="col-md-10 form-inline" style="width: 600px">
        <select class="selectpicker show-tick form-control" data-live-search="true" name="sourceId" id="sourceId"></select>
    </div>
</div>

initSourceConfig();

function initSourceConfig() {
    $.ajax({
        type: 'get',
        url: '/dsConfigs/getDsSourceAll',
        async: false,
        success: function (data) {
            var select = $("#sourceId");
            select.append("<option selected >请选择数据源</option>")
            for (var i = 0; i < data.length; i++) {
                var v = data[i].sourceName;
                var vId = data[i].id;
                select.append("<option value='" + vId + "'>" + v + "</option>")

            }
            $("#sourceId").selectpicker('refresh');
        }
    });
}

3、编辑回显时赋值

initData();

function initData(){
   var id = getUrlParam("id");
   if(id != ""){
      $.ajax({
         type : 'get',
         url : '/jobs/'+id,
         async : false,
         success : function(data) {
            $("#id").val(data.id);
                     
                      $("#sourceId").val(data.sourceId);
                      //$('#sourceId').selectpicker('val',data.sourceId);
                      $('#sourceId').selectpicker('refresh');
                      $('#sourceId').selectpicker('render');//selectpicker的下拉框回显加载默认的数据，需要刷新一下才可以将数据完全的回显出来
            $("#jobDes").val(data.jobDes);
         }
      });
   }
}