如何使用jQuery为Bootstrap Selectpicker的Optgroup添加选项

我来帮你解决这个问题～你当前的代码之所以没生效，是因为你把新选项直接追加到了整个<select>元素上，而不是目标的<optgroup>里面，所以新选项不会出现在你想要的分组里。

正确的实现步骤 #

1. 精准定位到目标optgroup元素（通过它的label属性）
2. 将新选项追加到这个optgroup内部
3. 调用selectpicker('refresh')刷新组件，让新增的选项显示出来

完整代码示例 #

// 定义要添加的选项
var groupOption = "<option value='123'>123</option>";
// 定位到label为"Label 1"的optgroup，追加选项
$("#selectpickerdemo optgroup[label='Label 1']").append(groupOption);
// 刷新Selectpicker组件，使新选项生效
$("#selectpickerdemo").selectpicker('refresh');

额外注意事项 #

如果你的optgroup标签里包含特殊字符（比如空格、符号），直接用属性选择器可能会有匹配问题，这时候可以用filter()方法来更精准地定位：

var groupOption = "<option value='123'>123</option>";
// 筛选出label完全匹配的optgroup
var targetOptgroup = $("#selectpickerdemo optgroup").filter(function() {
  return $(this).attr("label") === "Label 1";
});
// 追加选项并刷新
targetOptgroup.append(groupOption);
$("#selectpickerdemo").selectpicker('refresh');

另外要确保你的Bootstrap Selectpicker版本和jQuery 3.3.1兼容，目前主流稳定版本的Selectpicker都能和这个jQuery版本正常配合。

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