HTML <select> 標籤建立單選或多選選單-html教學-PHP中文網

所有主流瀏覽器都支援

select 元素可建立單選或多選選單。

提示：select 元素是一種表單控件，可用於在表單中接受使用者輸入。

屬性

New: HTML5 中的新屬性。

屬性	值	描述
autofocus（5）	autofocus	規定在頁面載入後文字區域自動獲得焦點。
disabled	disabled	規定禁用該下拉清單。
form（5）	form_id	規定文字區域所屬的一個或多個表單。
multiple	multiple	規定可選擇多個選項。
name	name	規定下拉清單的名稱。
required（5）	required	規定文字區域是必填的。
size	number	規定下拉清單中可見選項的數目。

本例示範如何在HTML頁面中建立簡單的下拉列錶框。下拉列錶框是一個可選清單。

<html>

<body>

<form>
<<span style="color: #0000ff;">select</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">cars</span><span style="color: #800000;">"</span>>
<option value=<span style="color: #800000;">"</span><span style="color: #800000;">volvo</span><span style="color: #800000;">"</span>>Volvo</option>
<option value=<span style="color: #800000;">"</span><span style="color: #800000;">saab</span><span style="color: #800000;">"</span>>Saab</option>
<option value=<span style="color: #800000;">"</span><span style="color: #800000;">fiat</span><span style="color: #800000;">"</span>>Fiat</option>
<option value=<span style="color: #800000;">"</span><span style="color: #800000;">audi</span><span style="color: #800000;">"</span>>Audi</option>
</<span style="color: #0000ff;">select</span>>
</form>

</body>
</html>

登入後複製

本例示範如何建立一個簡單的帶有預選值的下拉清單。（譯者註：預選值指預先指定的首選項。）

<html>

<body>

<form>
<<span style="color: #0000ff;">select</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">cars</span><span style="color: #800000;">"</span>>
<option value=<span style="color: #800000;">"</span><span style="color: #800000;">volvo</span><span style="color: #800000;">"</span>>Volvo</option>
<option value=<span style="color: #800000;">"</span><span style="color: #800000;">saab</span><span style="color: #800000;">"</span>>Saab</option>
<option value=<span style="color: #800000;">"</span><span style="color: #800000;">fiat</span><span style="color: #800000;">"</span> selected=<span style="color: #800000;">"</span><span style="color: #800000;">selected</span><span style="color: #800000;">"</span>>Fiat</option>
<option value=<span style="color: #800000;">"</span><span style="color: #800000;">audi</span><span style="color: #800000;">"</span>>Audi</option>
</<span style="color: #0000ff;">select</span>>
</form>

</body>
</html>

登入後複製

附：Select 物件

Select 物件代表 HTML 表單中的一個下拉清單。

在 HTML 表單中，

您可透過遍歷表單的 elements[] 陣列存取某個 Select 對象，或使用 document.getElementById()。

Select 物件集合

集合	描述
options[]	傳回包含下拉清單中的所有選項的一個陣列。

Select 物件屬性

屬性	描述
disabled	設定或傳回是否應停用下拉清單。
form	傳回包含下拉清單的表單的參考。
id	設定或傳回下拉清單的 id。
length	傳回下拉清單中的選項數目。
multiple	設定或傳回是否選擇多個項目。
name	設定或傳回下拉清單的名稱。
selectedIndex	設定或傳回下拉清單中被選項目的索引號。
size	設定或傳回下拉清單中的可見行數。
tabIndex	設定或傳回下拉清單的 tab 鍵控制次序。
type	傳回下拉清單的表單類型。

標準屬性

屬性	描述
className	設定或傳回元素的 class 屬性。
dir	設定或返回文字的方向。
lang	設定或傳回元素的語言代碼。
title	設定或傳回元素的 title 屬性。

Select 物件方法

方法	描述
add()	向下拉列表新增一個選項。
blur()	從下拉清單移開焦點。
focus()	在下拉清單上設定焦點。
remove()	從下拉清單中刪除一個選項。

Select 物件事件句柄

事件句柄	描述
onchange	當改變選擇時所呼叫的事件句柄。