如何以编程方式隐藏选择选项? [英] How to hide a selectize option programmatically?
问题描述
我目前有一个selectize下拉菜单，该下拉菜单中有一些选项被禁用和隐藏，具体取决于我拥有的字符串列表.这是我尝试的非选择javascript函数:
I currently have a selectize drop-down that is suppose to have some options in it disabled and hidden depending on a list of strings that I have. Here is the non-selectize javascript function that I tried:
<!DOCTYPE html>
<html>
<body>
<select onchange="ToggleSelectizeOptions(this.value)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="ford">Ford</option>
<option value="hyundai">Hyundai</option>
<option value="honda">Honda</option>
<option value="porsche">Porsche</option>
</select>
<select id="selectize">
<option value="">All Vehicles</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="ford">Ford</option>
<option value="hyundai">Hyundai</option>
<option value="honda">Honda</option>
<option value="porsche">Porsche</option>
</select>
<script>
function ToggleSelectizeOptions(ids) {
var selectizeOptions = document.getElementById("selectize").options;
var selectizeSingleOption;
//We always start at 1 because index 0 always have "" as the value.
for (var idx = 1; idx < selectizeOptions.length; idx++) {
selectizeSingleOption = selectizeOptions[idx];
if (ids) {
if (ids.includes(selectizeSingleOption.value)) {
selectizeSingleOption.style.display = "";
} else {
selectizeSingleOption.style.display = "none";
}
} else {
selectizeSingleOption.style.display = "";
}
}
}
</script>
</body>
</html>
这适用于不是selectize控件的下拉菜单，但我正在寻找一种可以使用selectize.js来完成相同操作的解决方案.
This works with dropdowns that are not selectize controls but I'm looking for a solution that would use selectize.js to do the same thing.
我看到了问题与我想要的问题类似，除了在我要隐藏选项时答案会禁用该选项.
I saw this question that is similar to what I want, except the answer disables the option while I want to hide the option.
推荐答案
除了将其从options数组中移除之外，我不知道一种隐藏"选择选项(使用显示CSS或其他方式)的方法.在初始化selectize控件时创建.如果这是您需要做的所有事情，那么可以使用selectize
I am not aware of a way to "hide" selectize options (with display css or otherwise) other than simply removing them from the options array that is created when you initialize a selectize control. If that is all that you need to do, then you can remove a selectize option by using the selectize removeOption(value) method (see the working snippet below for an example).
根据您的代码示例，您的最终目标似乎是创建级联下拉菜单.如果是这样，请参见下面的第二个片段作为示例.
Based on your code example, it looks like your ultimate goal is to create cascading dropdowns. If so, see the 2nd snippet below for an example.
const sel1 = $('#select1').selectize();
sel1[0].selectize.removeOption('ford');
sel1[0].selectize.refreshOptions();
<!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>
<select id="select1">
<option value="ford">Ford</option>
<option value="honda">Honda</option>
</select>
<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>
如果最终目的是创建级联下拉菜单，则在第一个select元素中选择的值将确定第二个select元素中可用的选项.下面的代码段初始化了javascript中的选项，而不是html中的选项.
If your ultimate goal is to create cascading dropdowns where the value selected in the first select element determines which options are available in a second select element. The snippet below initializes the options in the javascript rather than the html.
const makes = [
{text: 'Makes', value: ''},
{text: 'Ford', value: 'ford'},
{text: 'Honda', value: 'honda'}
];
const models = [{text: 'Models', value: ''}];
const modelsByMake = {
ford: [
{text: 'Explorer', value: 'explorer'},
{text: 'Expedition', value: 'expedition'}
],
honda: [
{text: 'Civic', value: 'civic'},
{text: 'Accord', value: 'accord'}
]
};
const sel2 = $('#select2').selectize({
options: models,
items: [''],
valueField: 'value',
labelField: 'text',
sortField: 'value',
searchField: ['text'],
load: (query, callback) => {
let options = [];
$.each(modelsByMake, (i, v) => {
options = options.concat(v);
});
callback(options);
},
preload: true
});
const sel1 = $('#select1').selectize({
options: makes,
items: [''],
valueField: 'value',
labelField: 'text',
sortField: 'value',
searchField: ['text'],
onChange: (value) => {
let options = models;
if (value) {
// get models for selected make
options = options.concat(modelsByMake[value]);
} else {
// get all models
$.each(modelsByMake, (i, v) => {
options = options.concat(v);
});
}
sel2[0].selectize.clear(); // clear sel2 selected items
sel2[0].selectize.clearOptions(); // clear sel2 options
// load options corresponding to sel1 value in sel2
sel2[0].selectize.load((callback) => {
callback(options);
});
// refresh sel2 options list
sel2[0].selectize.refreshOptions();
}
});
<!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>
<select id="select1"></select>
<select id="select2"></select>
<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>
这篇关于如何以编程方式隐藏选择选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
