How to fix bootstrap multiselect search data using ajax

Question

I am Using bootstrap multi select. I have two drop downs and both have datas with search feature.

what i am doing .. on change function on first drop down i want to change second drop down value using ajax.I have used rebuild too. But search feature value is not changing

<select class="selectpicker form-control multiselect" multiple="multiple" role="multiselect" data-live-search="true" id="sel1">
  <option selected disabled> Class</option>
  <option value="one">one</option>
  <option value="two">two</option>
  <option value=" three">three</option>
</select>



<select class="selectpicker form-control multiselect" multiple="multiple" role="multiselect" data-live-search="true" id="sel2">
  <option selected disabled>Molecule</option>
  <option value="100 student">100 student</option>
  <option value="200 student">200 student</option>
  <option value="300 student">300 student</option>
</select>

My ajax function

$("#sel1").change(function () {
  $.ajax({
    type: "POST",
    url: "http://test.com/selectdropdown",
    cache: false,
    data: {
      classval: val1
    },
  }).done(function (msg) {
    var data = $.parseJSON(msg);

    var options = '';
    var tmp = [];
    for (var i = 0; i < data.classdata.length; i++) {
      var id = data['classdata'][i]['class_id'];
      var name = data['classdata'][i]['noofstudent'];

      options += '<option value=' + id + '>' + name + '</option>';
      element = { "label": name, "value": id }
      tmp.push(element);

    }

    $("#sel2").multiselect('dataprovider', tmp);
    $('#sel2').multiselect('rebuild');
  })
});

but drop down two data is not chaning.. if i use inspect element i can see the data

Answer 1

After lot of rnd . I have got solution. i have to refresh select picker too. hope this help to others

$('.selectpicker').selectpicker('refresh');