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

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

<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/)

解决方法

在渲染选项时,您可以使用 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>

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

解决方法

相关文章