在 JavaScript 中設定選定的選項

select 是一個 HTML 輸入元素，用於指定下拉選項列表，使用者可以從中選擇任何選項。在今天的帖子中，我們將學習如何在 JavaScript 中設定此 HTML 元素的值。

在 JavaScript 中使用 document.getElementById() 設定選擇元素

JavaScript 提供的這個內建 document 方法返回其 id 與指定的 id 匹配的元素物件。實際值由行 element.value = 'NEW_VALUE' 設定。

語法

document.getElementById($id);

引數

$id：它是一個強制引數，指定必須匹配的 HTML 屬性的 id。

返回值

如果找到對應的元素，則返回對應的 DOM 元素物件；否則，它返回 null。

示例程式碼：

<select id="osDemo">
    <option value="Linux">Linux</option>
    <option value="Windows">Windows</option>
    <option value="MacOS">MacOS</option>
</select>

<button type="button" onclick="document.getElementById('osDemo').value = 'MacOS'">
Click to Update to MacOS.
</button>

輸出：

在 JavaScript 中使用 document.querySelector() 設定選擇元素

這是 JavaScript 提供的內建 document 方法，返回其 selector 與指定選擇器匹配的元素物件。querySelector() 和 querySelectorAll() 之間的唯一區別是第一個是單個匹配元素物件，然後返回匹配元素的所有物件。如果傳遞了無效的選擇器，則會發出 SyntaxError。實際值由 element.value = 'NEW_VALUE' 行設定

語法

document.querySelector($selector);

引數

$selector：它是一個強制引數，用於指定 class 或 id 的匹配條件。此字串必須是有效的 CSS 選擇字串。

返回值

返回 DOM 中滿足選擇器條件的第一個匹配元素物件。

示例程式碼：

<select id="osDemo" class="osDemoClass">
    <option value="Linux">Linux</option>
    <option value="Windows">Windows</option>
    <option value="MacOS">MacOS</option>
</select>

<button type="button" onclick="document.querySelector('.osDemoClass').value = 'MacOS'">
Click to Update to MacOS.
</button>

輸出：