我有一个包含多个选项的选择,我尝试以编程方式使某些选项不可选择。例如,我的代码是:
<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(使用前将#替换为@)