frankhale/dropdown-dependency.html

## dropdown-dependency.html
<!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>
	<!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>