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：

activities

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;
}

HTML表单的预设下拉列表？

1 个答案: