如何以编程方式隐藏选择选项?
How to hide a selectize option programmatically?
我目前有一个 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.js 来做同样事情的解决方案。
我看到 this question 与我想要的相似,只是答案禁用了该选项,而我想隐藏该选项。
除了简单地从初始化选择时创建的 options
数组中删除它们之外,我不知道有什么方法可以“隐藏”选择选项(使用显示 css 或其他方式)控制。如果这就是您需要做的全部,那么您可以使用 selectize removeOption(value)
方法删除一个 selectize 选项(有关示例,请参见下面的工作代码段)。
根据您的代码示例,您的最终目标似乎是创建级联下拉菜单。如果是这样,请参阅下面的第二个片段作为示例。
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">
<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>
</head>
<body>
<select id="select1">
<option value="ford">Ford</option>
<option value="honda">Honda</option>
</select>
</body>
</html>
如果您的最终目标是创建级联下拉菜单,其中第一个 select
元素中选择的值决定了第二个 select
元素中可用的选项。下面的代码片段初始化 javascript 中的选项而不是 html.
const models = [{text: 'Models', value: ''}];
const makes = [
{text: 'Makes', value: ''},
{text: 'Ford', value: 'ford'},
{text: 'Honda', value: 'honda'}
];
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">
<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>
</head>
<body>
<select id="select1"></select>
<select id="select2"></select>
</body>
</html>
我目前有一个 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.js 来做同样事情的解决方案。
我看到 this question 与我想要的相似,只是答案禁用了该选项,而我想隐藏该选项。
除了简单地从初始化选择时创建的 options
数组中删除它们之外,我不知道有什么方法可以“隐藏”选择选项(使用显示 css 或其他方式)控制。如果这就是您需要做的全部,那么您可以使用 selectize removeOption(value)
方法删除一个 selectize 选项(有关示例,请参见下面的工作代码段)。
根据您的代码示例,您的最终目标似乎是创建级联下拉菜单。如果是这样,请参阅下面的第二个片段作为示例。
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">
<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>
</head>
<body>
<select id="select1">
<option value="ford">Ford</option>
<option value="honda">Honda</option>
</select>
</body>
</html>
如果您的最终目标是创建级联下拉菜单,其中第一个 select
元素中选择的值决定了第二个 select
元素中可用的选项。下面的代码片段初始化 javascript 中的选项而不是 html.
const models = [{text: 'Models', value: ''}];
const makes = [
{text: 'Makes', value: ''},
{text: 'Ford', value: 'ford'},
{text: 'Honda', value: 'honda'}
];
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">
<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>
</head>
<body>
<select id="select1"></select>
<select id="select2"></select>
</body>
</html>