如何使用 Selectize.js 以编程方式使特定选项不可选择?

2023-12-19

我有一个包含多个选项的选择,我尝试以编程方式使某些选项不可选择。例如,我的代码是:

<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/ http://jsfiddle.net/j8YUA/3/)


您可以使用disabledField https://github.com/selectize/selectize.js/blob/master/docs/usage.md#data_searching设置在渲染选项时以编程方式使选择选项“不可选择”。您还可以在事后使用以下命令使选项“不可选择”updateOption https://github.com/selectize/selectize.js/blob/master/docs/api.md#methods_options方法(或者您可以简单地使用removeOption https://github.com/selectize/selectize.js/blob/master/docs/api.md#methods_options方法)例如:

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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Selectize.js 以编程方式使特定选项不可选择? 的相关文章

随机推荐