jQuery给带selectpicker类的select追加option不生效该如何解决？

你使用的selectpicker是Bootstrap Select插件的标识类，该插件初始化后会隐藏原生<select>元素，自行渲染一套自定义的下拉交互UI。直接修改原生select的option选项时，插件不会自动同步更新到自定义UI结构，因此看起来就像追加操作失效了，实际上原生select的option已经成功插入，只是渲染层没有同步更新。

在所有option追加完成后，手动调用插件的refresh方法，触发插件重新读取原生select的最新内容，同步更新自定义UI即可。

修改后的Ajax代码如下：

$(document).ready(function() {
  $.ajax({
    type: "POST",
    url: "/LinksManager/GetLessons",
    dataType: "json",
    success: function(res) {
      //console.log(res);
      $.each(res, function(index, value) {
        $("#lessonsDD").append('<option value=' + value.id + '>' + value.lessonName + '</option>');
      });
      // 新增以下一行代码，刷新selectpicker组件
      $("#lessonsDD").selectpicker('refresh');
    }
  });
});

如果执行refresh后仍未生效，说明你的select元素还未初始化selectpicker组件，可以在refresh前先执行初始化：

$("#lessonsDD").selectpicker();
$("#lessonsDD").selectpicker('refresh');

内容的提问来源于stack exchange，提问作者user15134192