bootstrap-select 从后台动态获取数据

bootstrap-select 从后台动态获取数据

      最近在完成一个需求的时候，由于需要将固定的数据弄成动态数据，由于之前的select支持多选模糊查询使用的是

bootstrap，所以博主百度了下，最终发现了这个方法解决，今天在这里跟大家分享。

      首页是html样式代码：

<div class='form-group'>
  <select class='form-control'  autocomplete='off' id='projectType'>
       <option value ='1'>项目1</option>
       <option value ='2'>项目2</option>
       <option value ='3'>项目3</option>
  </select>
</div>
<div class='form-group'>
    <select class='selectpicker' autocomplete='off' id='party_a_project_name'  
    data-live-search='true' multiple title='--请选择上游项目--'>
    </select>
</div>

      然后我们先写一个接口，大概这样可以调取返回数据填充select项目：

$projectTypeArray= array(
    array('id' => 1,'text' => 项目1,'selected' => “”),
    array('id' => 2,'text' => 项目2,'selected' => “”)
);    
echo json_encode(projectTypeArray)

     然后是js部分

$("#projectType").change(function(){
    if ($(this).val() == "") return;
    $("#party_a_project_name option").remove();
    var selectType = $(this).val();
    $.ajax({
        method: 'post',
        url: '接口地址',
        data: {
            projectType: selectType,
        },
        success: function (res) {
           var html = '';
           Object.keys(res).forEach(function(key){
              html += '<option value="' + res[key].id + '"'+ res[key].selected +'>' 
              + res[key].text+ '</option>';
           });
           $("#party_a_project_name").html(html);
           $("#party_a_project_name").selectpicker('refresh');
        }
    });
    
});

      这样就可以实现我们需要的效果，以上只是关键的代码，并不包含全部，但是相信大家看到这部分代码，一定可以实现。