HTML select 下拉選單

admin發表於2018-10-30
HTML

select 下拉選單由 <select> 和 <option> 標籤配合使用生成。

下拉選單控制元件提供可供選擇的項，可以選中其中的一項或者多項。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <select name="sel">
    <option value="1">螞蟻部落一</option>
    <option value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
    <option value="4">螞蟻部落四</option>
  </select>
</form>
</body>
</html>

下拉選單具體項由 <option> 標籤定義，當表單提交時，被選中具體項的 value 值會被髮送。

特別說明：通常情況下，利用 name 屬性將表單資料提交到後臺。

<select> 標籤還有兩個重要屬性：

（1）.multiple：規定select下拉選單可以選擇多項，預設只能選擇其中一項。

（2）.size：規定下拉選單展開之後可見列表項的數目。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <select name="sel" multiple size="3">
    <option value="1">螞蟻部落一</option>
    <option value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
    <option value="4">螞蟻部落四</option>
  </select>
</form>
</body>
</html>

select下拉選單還具有一些其他屬性，下面分別做一下介紹:

（1）.form（HTML5）:規定輸入域所屬的一個或多個表單。

（2）.autofocus（HTML5）：規定在頁面載入時，域自動地獲得焦點。

（3）.disabled：設定文字域為只讀。

（4）.selected：設定option項為選中狀態（此屬性不屬於<select>，由於關係密切，這裡一併介紹）。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <select name="sel" autofocus>
    <option value="1">螞蟻部落一</option>
    <option value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
    <option value="4">螞蟻部落四</option>
  </select>
</form>
</body>
</html>

通過autofocus設定select下拉選單載入完畢後自動獲取焦點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <select name="sel" disabled>
    <option value="1">螞蟻部落一</option>
    <option value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
    <option value="4">螞蟻部落四</option>
  </select>
</form>
</body>
</html>

設定select下拉選單為不可用狀態。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">

</form>
<select name="sel" form="ant">
  <option value="1">螞蟻部落一</option>
  <option value="2">螞蟻部落二</option>
  <option value="3">螞蟻部落三</option>
  <option value="4">螞蟻部落四</option>
</select>
</body>
</html>

form屬性引用所屬表單的id，於是，雖然下拉選單在<form>之外，但依然是該表單的一部分。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <select name="sel">
    <option value="1">螞蟻部落一</option>
    <option selected value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
    <option value="4">螞蟻部落四</option>
  </select>
</form>
</body>
</html>

上面的程式碼設定第二項為選中狀態。

相關文章