HTML 表单的预设下拉列表？

debugcn 发表于 Dev

神秘煎饼

我正在尝试使用预设下拉列表制作 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>

这只是我在几分钟内制造的一个乱七八糟的东西，以展示我试图实现的那种行为。我只是在寻找关于如何做这种事情的任何教程或指南。似乎有人以前会尝试过这个。

感谢您的任何回复！

神秘煎饼

通过查看类似的答案，我发现了一种更好的涉及类的方法：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。