在 HTML 中選擇預設值
本文將討論為 HTML <select>
元素選擇預設值的兩種方法。
使用 selected="selected"
為 HTML <select>
元素選擇預設值
我們可以使用 selected="selected"
選項來選擇 HTML 程式碼中的預設值。我們在 <option>
標籤中寫入 selected
屬性。我們可以將 selected
屬性的值設定為 selected
以在首次載入網頁時預設選擇特定選項。它在 HTML 中稱為布林屬性。預先選擇的選項將首先顯示在下拉選單中。此屬性只能用於 <option>
元素。它支援 Google Chrome、Internet Explorer、Firefox、Opera 等網路瀏覽器。
例如,在 HTML 正文中,建立一個 <select>
標記,然後在其中建立五個選項。為每個選項的 value
屬性寫下 1-5
的數字。在每個選項的 <option>
標籤之間寫入從 One
到 Five
的文字。接下來,在開啟 <option>
標籤後,將 selected
屬性寫入值 selected
,你希望選擇該特定值作為預設值(以下示例中的選項 3)。最後,關閉 <select>
標籤。
下面的示例使用 select=selected
方法在下拉選單中選擇預設值。我們建立了一個下拉選單,讓我們可以從 One
到 Five
中選擇值。當頁面重新載入時,預設情況下會載入選項 Three
,因為我們已使用 selected
屬性將元素指定為預設值。
示例程式碼:
<body>
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option selected="selected" value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</body>
使用 <option selected>
為 HTML <select>
元素選擇預設值
我們可以使用 <option selected>
選項來選擇 HTML 中的預設值。這個過程也有點類似於第一個。它也是一個布林屬性。<select>
元素主要用於收集使用者的輸入。我們寫在 <select>
元素中的 <option>
標籤定義了下拉選單中包含的可用專案。我們可以在特定的 <option>
標籤中寫入 selected
選項,以將該選項指定為預設的選定選項。
例如,在 HTML 正文中,建立一個 <select>
標記,後跟 <option>
標記,如上述方法中所述。在下一行中,指定從 1-5
到選項標籤的值並關閉選項標籤。重複這個過程五次。然後,在第二個 <option>
標籤後面寫上 <selected>
以將其選為預設值。最後,關閉 <select>
標籤。
下面的示例使用 <option selected>
選項來選擇預設值。當頁面載入時,我們可以在下拉選單中看到預設載入選項 2
,因為我們在第二個元素的情況下使用了 <option selected>
。
示例程式碼:
<body>
<select>
<option> 1 </option>
<option selected> 2 </option>
<option> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
</body>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn