如何設定 HTML 'select' 元素的預設值?
要設定 HTML <select> 元素的預設值,我們可以使用 HTML 的 selected 屬性。當您希望在下拉選單中顯示預定義值時,可以使用此屬性。
在這篇文章中,我們有一個包含四個選項的下拉列表,我們的任務是為 HTML select 元素設定預設值。
設定 select 元素預設值的步驟
我們將按照以下步驟設定 HTML select 元素的預設值
- 我們使用 select 標籤建立了一個下拉列表,然後使用 option 標籤向列表中添加了選項。
- 我們在希望設定為下拉列表預設值的選項上使用了 **selected** 屬性。
- 我們還使用了 disabled 和 hidden 屬性。disabled 屬性阻止選擇該選項,而 hidden 屬性則隱藏該選項,使其不會出現在下拉列表中。當您想要顯示說明但不想將其包含在選項中時,這很有用。
示例
這是一個完整的示例程式碼,實現了上述步驟,使用 **selected** 屬性為 HTML <select> 元素設定預設值。
<!DOCTYPE html>
<html>
<body>
<h3>
To set the default value for an
HTML select element
</h3>
<p>
In this example we have used HTML
<strong>selected</strong> attribute
to set the default value for HTML
select element.
</p>
<select name="courses">
<option value="none" selected disabled hidden>
Choose any option...
</option>
<option value="Java">Java</option>
<option value="Discrete Mathematics">
Discrete Mathematics
</option>
<option value="Chemistry">Chemistry</option>
<option value="IOT">IOT</option>
</select>
</body>
</html>
結論
在本文中,我們討論瞭如何使用 **selected** 屬性為 HTML <select> 元素設定預設值。
廣告
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP