HTML Select 通过 JS 变量指定默认选择 - Javascript

在 HTML 中，<select> 元素用于创建下拉列表，用户可以从预定义的选项中选择一个或多个值。而通过 JavaScript，我们可以通过操作 DOM 的方式来动态地设置 <select> 的默认选项。

方法一：设置 selected 属性

首先，我们可以通过设置 <option> 元素的 selected 属性来指定默认选择。将选项的 selected 属性设置为 true，即可将该选项设置为默认选中。

// 获取 select 元素
var selectElement = document.getElementById("mySelect");

// 设置默认选择
selectElement.options[index].selected = true;

上述代码中，我们首先通过 document.getElementById() 获取 id 为 "mySelect" 的 <select> 元素。然后将指定的选项的 selected 属性设置为 true，其中 index 是选项的索引值。

值得注意的是，如果我们希望设置多个选项为默认选中，只需要将它们的 selected 属性都设置为 true 即可。

方法二：设置 value 属性

除了设置选项的 selected 属性，我们还可以通过设置 <select> 元素的 value 属性来指定默认选择。

// 获取 select 元素
var selectElement = document.getElementById("mySelect");

// 设置默认选择
selectElement.value = "optionValue";

上述代码中，我们首先通过 document.getElementById() 获取 id 为 "mySelect" 的 <select> 元素，并将 value 属性设置为选项的值，即可将该选项设置为默认选中。

方法三：通过 option 的索引值

如果我们知道选项的索引值，也可以通过修改 selectedIndex 属性来指定默认选择。

// 获取 select 元素
var selectElement = document.getElementById("mySelect");

// 设置默认选择
selectElement.selectedIndex = index;

上述代码中，我们通过 document.getElementById() 获取 id 为 "mySelect" 的 <select> 元素，然后将 selectedIndex 属性设置为选项的索引值。

总结

以上是通过 JavaScript 来指定 HTML <select> 默认选项的三种方法。我们可以根据具体的需求选择适合的方式来设置默认选择。

请注意，在使用这些方法时，确保在页面加载完成后再执行 JavaScript 代码，以免出现 DOM 元素未被完全加载的情况。

更多关于 JavaScript 操作 HTML 的内容，可以参考 MDN 文档。

希望这篇介绍对你有所帮助！