admin管理员组文章数量:1399482
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>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>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.
Share Improve this question edited Oct 11, 2018 at 14:49 benvc 15.2k4 gold badges38 silver badges57 bronze badges asked Oct 9, 2018 at 16:39 John OdomJohn Odom 1,2132 gold badges22 silver badges36 bronze badges 2- 1 Create a minimal reproducible example. – Roko C. Buljan Commented Oct 9, 2018 at 17:12
- @RokoC.Buljan I added code snippet to show that the code works. – John Odom Commented Oct 9, 2018 at 18:49
2 Answers
Reset to default 5I 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./ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>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 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./ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
</head>
<body>
<select id="select1"></select>
<select id="select2"></select>
</body>
</html>I had the same task - hide or remove some selectized options. The @benvc solution works for me, but it displays a dropdown, as if it was pressed.
Improved version:
const sel1 = $('#select1').selectize();
sel1[0].selectize.removeOption('ford');
sel1[0].selectize.refreshOptions(false);
Explanation:
As the documentation says it has a boolean parameter triggerDropdown:
refreshOptions(triggerDropdown)
...
triggerDropdown boolean
https://selectize.dev/docs/API/selectize#refreshoptionstriggerdropdown
Setting it to false prevents a dropdown from appearing. It worked even without refreshOptions() call. But I decided to keep it.
本文标签： javascriptHow to hide a selectize option programmaticallyStack Overflow
版权声明：本文标题：javascript - How to hide a selectize option programmatically? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744206175a2595199.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论