select picker复选框选中时限制双选项及取消后恢复选项问题

你遇到的核心问题是：用remove()方法直接删除了DOM中的<option>元素，后续调用show()时，这些元素已经不存在了，自然无法重新显示。以下是三种可行的解决方案：

方案1：用隐藏/显示替代删除（推荐） #

不需要删除选项，只通过CSS隐藏来限制选择，元素始终保留在DOM中，取消勾选时直接显示即可：

if (check_box.prop("checked")) {
  example1.selectpicker("val", "Option");
  example2.selectpicker("val", "Option");
  // 隐藏不需要的选项
  example3.find('[value="Option3"], [value="Option4"], [value="Option5"]').hide();
  example3.selectpicker('refresh'); // 刷新selectpicker渲染
  disable([example1, example2]);
} else {
  // 恢复显示被隐藏的选项
  example3.find('[value="Option3"], [value="Option4"], [value="Option5"]').show();
  example3.selectpicker('refresh');
  enable([example1, example2, example3]);
}

方案2：通过禁用选项限制选择（更友好） #

如果希望用户能看到这些选项但无法选择，可以禁用它们而不是隐藏：

if (check_box.prop("checked")) {
  example1.selectpicker("val", "Option");
  example2.selectpicker("val", "Option");
  // 禁用指定选项
  example3.find('[value="Option3"], [value="Option4"], [value="Option5"]').prop('disabled', true);
  example3.selectpicker('refresh');
  disable([example1, example2]);
} else {
  // 取消禁用
  example3.find('[value="Option3"], [value="Option4"], [value="Option5"]').prop('disabled', false);
  example3.selectpicker('refresh');
  enable([example1, example2, example3]);
}

方案3：提前保存原始选项，删除后恢复 #

如果必须使用删除的方式，需要在页面初始化时保存原始选项的HTML，取消勾选时重新插入：

// 页面加载完成后，保存example3的原始选项
const originalExample3Options = example3.html();

// 复选框状态切换逻辑
if (check_box.prop("checked")) {
  example1.selectpicker("val", "Option");
  example2.selectpicker("val", "Option");
  example3.find('[value="Option3"], [value="Option4"], [value="Option5"]').remove();
  example3.selectpicker('refresh');
  disable([example1, example2]);
} else {
  // 恢复原始选项
  example3.html(originalExample3Options);
  example3.selectpicker('refresh');
  enable([example1, example2, example3]);
}

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