在 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>
輸出:
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