bootstrap selectpicker控件select下拉框动态

末蓝、 2021-11-10 05:38 798阅读 0赞

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

**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();

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