如何使用Selectize.js以编程方式使特定选项无法选择？ [英] How to make a specific option unselectable programmatically with Selectize.js?
问题描述
我有一个选项有几个选项，我尝试以编程方式使一些选项无法选择。例如，我的代码是：
I have a select with several options and I try to make some of the options unselectable programmatically. For instance, my code is :
<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（即不显示而不是可选）以编程方式？ - 我试过这段代码......
My question is: how can I make to get option "2" disabled (i.e. not displaying and not selectable) programmatically? -- I tried this code...
$('select')[0].selectize.$dropdown_content.find('[data-value="2"]').removeAttr('data-selectable');
...但它不起作用（当我检查DOM时，我看到该选项2没有数据可选属性，但它仍然呈现并且可以选择......）。
... but it does not work (when I inspect the DOM I see that option "2" has no 'data-selectable' attribute, but it still renders and is selectable...).
我错了吗？如果是这样的话：什么是使选项无法选择的正确方法（我在文档中的任何地方都找不到它）？
Am I wrong here? And if so: what is the proper way to make an option unselectable (I can't find it anywhere in the doc)?
（我在这里创建了一个jsFiddle：< a href =http://jsfiddle.net/j8YUA/3/ =noreferrer> http://jsfiddle.net/j8YUA/3/ ）
(I created a jsFiddle here: http://jsfiddle.net/j8YUA/3/)
推荐答案
您可以使用 disabledField 设置在呈现选项时以编程方式使选择性选项不可选。您也可以在事后使用 updateOption 方法（或者您只需使用 removeOption 方法）例如：
You can use the disabledField setting to make a selectize option "unselectable" programmatically when rendering the options. You can also make an option "unselectable" after the fact using the updateOption method (or you can simply remove the option using the removeOption method) For example:
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>
这篇关于如何使用Selectize.js以编程方式使特定选项无法选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
