如何使用 Selectize.js 以编程方式使特定选项无法选择？答案

【问题标题】：How to make a specific option unselectable programmatically with Selectize.js?如何使用 Selectize.js 以编程方式使特定选项无法选择？
【发布时间】：2019-09-25 12:40:55
【问题描述】：

我有一个包含多个选项的选择，我尝试以编程方式使某些选项无法选择。例如，我的代码是：

<select>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
  <option value="3">Value 3</option>
</select>
<script>
  $('select').selectize();
</script>

我的问题是：如何以编程方式禁用选项“2”（即不显示且不可选择）？ -- 我试过这段代码...

$('select')[0].selectize.$dropdown_content.find('[data-value="2"]').removeAttr('data-selectable');

...但它不起作用（当我检查 DOM 时，我看到选项“2”没有 'data-selectable' 属性，但它仍然呈现并且是可选择的...）。

我错了吗？如果是这样：使选项无法选择的正确方法是什么（我在文档的任何地方都找不到它）？

（我在这里创建了一个 jsFiddle：http://jsfiddle.net/j8YUA/3/）

【问题讨论】：

将display 设置为none。
@Chris 谢谢，但这也不起作用。我创建了一个 jsFiddle 来轻松重现我的问题：jsfiddle.net/j8YUA/1

标签： jquery selectize.js

【解决方案1】：

在呈现选项时，您可以使用disabledField 设置以编程方式使选择选项“不可选择”。您也可以在事后使用updateOption 方法使选项“不可选择”（或者您可以使用removeOption 方法简单地删除该选项）例如：

const options = [
  {name: 'Option 1', disable: false},
  {name: 'Option 2', disable: true}
  ];

const sel = $('#select1').selectize({
  options: options,
  valueField: 'name',
  labelField: 'name',
  searchField: ['name'],
  disabledField: 'disable'
});

$('#button1').click(() => {
  sel[0].selectize.updateOption('Option 1', {name: 'Option 1', disable: true});
});

$('#button2').click(() => {
  sel[0].selectize.removeOption('Option 2');
});

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Selectize</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
  </head>

  <body>

    <div>Option 2 disabled</div>
    <input id="select1" name="select1" type="text" />
    <button id="button1">Disable Option 1</button>
    <button id="button2">Remove Option 2</button>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>

  </body>

</html>

【讨论】：

这个答案非常接近我想要做的，但是否可以隐藏该选项而不是禁用它？我主要是问这个问题：stackoverflow.com/questions/52725670/…
@JohnOdom - 您可以使用removeOption 方法完全删除该选项。这就是你想要做的吗？
不，但我知道这一点。我想我有一个可行的解决方案，我会在完成测试后提出我的问题。

【解决方案2】：

好像disabledField 没有实现。或者，您可以将 disabled 属性添加到要禁用的选项，然后执行以下操作：

$('#control').selectize({
  render: {
    option: function(item, escape) {
      if (item.disabled) {
        return '<div style="pointer-events: none; color: #aaa;">' + escape(item.label) + '</div>';
      }

      return '<div>' + escape(item.label) + '</div>';
    }
  }
});

（来源：https://github.com/selectize/selectize.js/issues/224）

【讨论】：

【解决方案3】：

选择选项存储在对象$('select')[0].selectize.options中，因此要删除选项，您应该从选项对象中删除相应的属性

 delete $('select')[0].selectize.options["2"];

【讨论】：