HTML表单的预设下拉菜单？

Question

我正在尝试制作一个带有预设下拉菜单的 HTML 表单。表单是为了经常使用，所以预设菜单是为了帮助用户选择常用的输入选项。

我在任何地方都找不到任何关于如何做到这一点的教程，所以我希望有人能指出我正确的方向。如果可能，我不想使用任何外部库。

通过预设下拉菜单，我的意思是这样的：

var lastPreset = "preset1";

function previousPreset(element) {
	lastPreset = element.value;
}

function updatePresets(element) {
	var old = document.getElementById(lastPreset);
	if (old) {
		old.style.display = "none";
		for (var i = 0; i < old.childNodes.length; i++) {
			old.childNodes[i].required = false;
		}
	}
	var preset = element.value;
	var div = document.getElementById(preset);
	if (div) {
		div.style.display = "block";
		for (var i = 0; i < div.childNodes.length; i++) {
			div.childNodes[i].required = true;
		}
	}
	lastPreset = preset;
}

function submitted() {
	console.log("Submitted!");
	return false;
}

#preset2, #preset3 {
  display: none;
}

<form onsubmit="return submitted();">
	<select onchange="updatePresets(this);" onfocus="previousPreset(this);">
		<option selected value="preset1">Preset 1</option>
		<option value="preset2">Preset 2</option>
		<option value="preset3">Preset 3</option>
	</select>
	<div id="preset1">
		<textarea required placeholder="Sample Text"></textarea>
	</div>
	<div id="preset2">
		<input type="text">
	</div>
	<div id="preset3">
		<input type="file">
	</div>
	<input type="submit" value="Submit">
</form>

这只是我在几分钟内制作的一个乱七八糟的东西，以展示我想要实现的那种行为。我只是在寻找有关如何执行此类操作的任何教程或指南。似乎有人以前会尝试过。

感谢您的回复！

Answer 1

我发现了一个更好的方法，涉及 from looking at similar answers 类：

function updatePresets(element) {
	var presets = document.getElementsByClassName("presets");
	var div = document.getElementById(element.value);
	for (var i = 0; i < presets.length; i++) {
		var preset = presets[i];
		preset.style.display = div === preset ? "block" : "none";
		for (var j = 0; j < preset.childNodes.length; j++) {
			preset.childNodes[j].required = div === preset;
		}
	}
}

function submitted() {
	console.log("Submitted!");
	return false;
}

#preset2, #preset3 {
	display: none;
}

<form onsubmit="return submitted();">
	<select onchange="updatePresets(this);">
		<option selected value="preset1">Preset 1</option>
		<option value="preset2">Preset 2</option>
		<option value="preset3">Preset 3</option>
	</select>
	<div id="preset1" class="presets">
		<textarea required placeholder="Sample Text"></textarea>
	</div>
	<div id="preset2" class="presets">
		<input type="text">
	</div>
	<div id="preset3" class="presets">
		<input type="file">
	</div>
	<input type="submit" value="Submit">
</form>