在 JavaScript 中設定選定的選項

Shraddha Paghdar 2023年1月30日 2022年5月11日
  1. 在 JavaScript 中使用 document.getElementById() 設定選擇元素
  2. 在 JavaScript 中使用 document.querySelector() 設定選擇元素
在 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>

輸出:

之前使用 id 在 JS 中設定選定的選項

使用 id 之後在 JS 中設定選定的選項

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

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

語法

document.querySelector($selector);

引數

$selector:它是一個強制引數,用於指定 classid 的匹配條件。此字串必須是有效的 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>

輸出:

之前使用選擇器在 JS 中設定選定的選項

使用選擇器在 JS 中設定選定的選項之後

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn