Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Options With Dependencies</title>
</head>
<body>
<select id="select1" name="select1" title="Select 1">
<option value="">-- select an option --</option>
<option value="A">first</option>
<option value="D">second</option>
</select>
<select id="select2" name="select2" title="Select 2">
<option value="">-- select an option --</option>
<option value="B">first</option>
<option value="E">second</option>
</select>
<select id="select3" name="select3" title="Select 3">
<option value="">-- select an option --</option>
<option value="C">first</option>
<option value="F">second</option>
</select>
<select id="select4" name="select4" title="Select 4" disabled="true">
<option value="">-- select an option --</option>
</select>
<script>
function arrayEquals(arrOne, arrTwo) {
return (
arrOne.length === arrTwo.length &&
arrOne.every(function (element) {
return arrTwo.includes(element);
})
);
}
function removeAndAddDefaultOptions(targetSelector, disabled) {
Array.from(targetSelector).forEach((option) => {
targetSelector.removeChild(option);
});
var opt = document.createElement("option");
opt.appendChild(document.createTextNode("-- select an option --"));
opt.value = "";
targetSelector.appendChild(opt);
targetSelector.disabled = disabled;
}
var selectOptions = [
{
option: "value 1",
value: "value1",
dependencies: ["A", "B", "C"],
},
{
option: "value 2",
value: "value2",
dependencies: ["A", "B", "C"],
},
{
option: "value 3",
value: "value3",
dependencies: ["A", "B", "C"],
},
{
option: "value 4",
value: "value4",
dependencies: ["D", "E", "F"],
},
{
option: "value 5",
value: "value5",
dependencies: ["D", "E", "F"],
},
{
option: "value 6",
value: "value6",
dependencies: ["D", "E", "F"],
},
];
function checkOptionsSelected(dropdowns, target, options, debug) {
let dds = [],
selectedValues = [],
targetSelector = document.querySelector(target);
Array.from(dropdowns).forEach((dd) => {
var selector = document.querySelector(dd);
selectedValues.push(selector.value);
dds.push({
selector,
name: dd,
value: selector.value,
});
});
if (debug) {
console.log("dds: ", dds);
console.log("options: ", options);
console.log("selectedValues: ", selectedValues);
}
let matchedOptions = [];
let matches = options.filter((opt) => {
if (arrayEquals(opt.dependencies, selectedValues)) {
matchedOptions.push(opt);
return true;
}
return false;
});
if (debug) {
console.log(matches);
}
if (matches.length > 0) {
removeAndAddDefaultOptions(targetSelector, false);
matchedOptions.map((mo) => {
var opt = document.createElement("option");
opt.appendChild(document.createTextNode(mo.option));
opt.value = mo.value;
targetSelector.appendChild(opt);
});
} else {
removeAndAddDefaultOptions(targetSelector, true);
}
}
document.querySelector("#select1").addEventListener("change", () => {
checkOptionsSelected(
["#select1", "#select2", "#select3"],
"#select4",
selectOptions,
true
);
});
document.querySelector("#select2").addEventListener("change", () => {
checkOptionsSelected(
["#select1", "#select2", "#select3"],
"#select4",
selectOptions,
true
);
});
document.querySelector("#select3").addEventListener("change", () => {
checkOptionsSelected(
["#select1", "#select2", "#select3"],
"#select4",
selectOptions,
true
);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment