我现在有一个selectize下拉菜单,根据我的字符串列表,它应该有一些选项被禁用和隐藏。下面是我尝试的非selectize javascript函数:
<!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 question与我想要的类似,只是答案是禁用选项,而我想要隐藏选项。
2条答案
按热度按时间uplii1fm1#
除了从初始化selectize控件时创建的
options
数组中删除selectize选项之外,我不知道还有什么方法可以“隐藏”selectize选项(使用display css或其他)。如果这就是您需要做的全部,那么您可以使用selectizeremoveOption(value)
方法删除selectize选项(参见下面的示例代码片段)。根据你的代码示例,你的最终目标似乎是创建级联下拉菜单。如果是这样,请参见下面的第二个代码片段。
如果你的最终目标是创建级联下拉菜单,其中第一个
select
元素中的值决定了第二个select
元素中的可用选项,下面的代码片段将在javascript而不是html中初始化选项。一个二个一个一个
gev0vcfq2#
我有同样的任务-隐藏或删除一些选定的选项。@benvc解决方案对我很有效,但它显示一个下拉菜单,就像它被按下一样。
改进版本:
说明:
正如文档所述,它有一个布尔参数triggerDropdown:
刷新选项(触发器下拉列表)
...
触发器下拉布尔值
https://selectize.dev/docs/API/selectize#refreshoptionstriggerdropdown
将其设置为false可以防止下拉菜单出现,即使没有refreshOptions()调用也可以工作,但我决定保留它。