我有一个选择有几个选项,我尝试以编程方式使一些选项无法选择.例如,我的代码是：
<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>
