搜尋

首頁 >web前端 >html教學 >HTML 標籤 建立單選或多選選單

WBOY
WBOY原創
2016-08-29 08:36:502723瀏覽

所有主流瀏覽器都支援

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 當改變選擇時所呼叫的事件句柄。
 
 
 
 
 
 
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：HTML
標籤 在頁面中建立一條水平線下一篇：HTML
標籤 在頁面中建立一條水平線

相關文章

看更多