代码之家 › 专栏 › 技术社区 › MysteryPancake

HTML表单的预设下拉列表?

input select forms html javascript

-1

MysteryPancake · 技术社区 · 6 年前

我正在尝试创建一个带有预设下拉列表的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>

这只是我在几分钟内做的一个糟糕的事情,以展示我正在努力实现的行为。我只是在找关于如何做这类事情的任何教程或指南。好像有人以前也试过。

感谢您的回复!

1 回复 | 直到 6 年前

MysteryPancake 6 年前

我发现了一个更好的方法 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>