Question

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

<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”没有“数据可选择”属性，但它仍然呈现并且可以选择......）。

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

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

Answer 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>

Answer 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）

Answer 3

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

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

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

3 个答案: