HTML 选择表单 - 如何“触发”默认选项

Question

我发现了很多关于如何设置 HTML“选择”表单的有用示例。我在任何地方都找不到的是如何“自动触发”默认选项，而不必先从下拉菜单中“选择”它。

Answer 1

在onload() 方法中执行此操作：

Var select = document.getElementsByName('fruit')[0];
select.value=1;
select.dispatchEvent(new Event('change')); 

这将在页面加载时将选定的选项更改为1（或您想要的任何其他选项），并触发onchange 事件，该事件将填充您的表格。

Answer 2

由于您已经为select元素定义了onchange事件，您可以调用.onchange()来触发select元素的onchange事件。

示例代码如下：

<form>
	<select name="fruit" onchange="showFruit(this.value)">
		<option>Choice:</option>    
		<option value="1">Yellow Fruit</option>
		<option value="2">Red Fruit</option>
	</select>
</form>

<script>
	window.onload = function () {
		var el = document.getElementsByName('fruit')[0];
		el.value = 1; //Set default value
		el.onchange(); //trigger onchange event
	}

	function showFruit(val) {
		alert(val);
	}
</script>