javascript - Bootstrap selectpicker 选项始终被选中

Question

我需要选项 x 始终在所选内容中被选中。(为此选项禁用取消选择)。

这是我当前的模板代码

<select multiple="multiple" data-size="5" data-max-options="10" class="selectpicker multi-select" name="brand">
    <option value="x" >X</option>
    <option value="y" >Y</option>    
</select>

期望的输出:选项 X 应该是强制性的/始终选择/不能取消选择。

Answer 1

已编辑。

添加选中和禁用的 html 属性:

添加选定和禁用的属性并不适用于所有浏览器。您只能通过 javascript 实现这一点，方法是在 <select> 发生变化时添加一个事件监听器。元素。

javascript 中的代码是:

document.querySelector("[name='brand']").addEventListener('change', function() { 
    document.querySelector("[name='brand'] option[value='x']").selected = true;
});

这是 codepen 上的一个工作示例: Multiple select mandatory option