jQuery操作bootstrap selectpicker的option时show方法失效如何解决

问题原因 #

你代码里存在两个核心错误导致效果不生效：

• jQuery获取值的方法调用错误：你用了不存在的value()方法，正确的取值方法是val()，这导致你根本拿不到子选项对应的父级ID，所有判断逻辑都不会按预期执行。
• 操作逻辑不符合bootstrap-select的渲染规则：bootstrap-select初始化后会生成自定义的下拉列表DOM结构，你直接修改原生<option>的显示隐藏状态不会同步到插件渲染的UI上，这类操作需要符合插件的约定规则。

正确实现代码 #

你可以通过给匹配失败的option添加disabled属性实现隐藏，bootstrap-select默认会隐藏禁用的选项，示例代码如下：

$("#parent").on('change', function (e) { 
  const parentId = $(this).val();
  $("#child option").each((i, a) => {
    const childParentId = $(a).val();
    // 不匹配的选项设为禁用，匹配的解除禁用
    $(a).prop('disabled', childParentId != parentId);
  });
  $("#child").selectpicker("refresh");
});

如果需要完全隐藏选项而非禁用，也可以给option设置data-hidden属性后刷新，效果一致。

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