9.13 下拉列表_HTML入門知識

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML入門知識 >> 9.13 下拉列表

9.13 下拉列表

編輯：HTML入門知識

一、下拉列表簡介

下拉列表由<select>和<option>這2個標簽配合使用。這個特點跟列表是一樣的，如無序列表是由<ul>標簽和<li>標簽配合使用。為了更好理解，我們可以把下拉列表看成一個特殊的無序列表。

下拉列表是一種最節省頁面空間的選擇方式，因為在正常狀態下只顯示一個選項，單擊下拉菜單打開菜單後才會看到全部的選項。

語法：

 
<select>
    <option>選項顯示的內容</option>
    ……
    <option>選項顯示的內容</option>
</select>

舉例：

在線測試

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>jQuery</option>
        <option>JavaScript</option>
        <option>ASP.NET</option>
        <option>Ajax</option>
    </select>
</body>
</html>

在浏覽器預覽效果如下：

點擊下拉列表小箭頭，列表項會全部展示出來，效果如下：

二、下拉列表屬性

1、<select>標簽屬性

下拉列表<select>標簽屬性 <select>標簽屬性說明 multiple 可選屬性，只有一個屬性值"multiple"。默認情況下下拉列表只能選擇一項，當設置multiple=“multiple”時，下拉列表可以選擇多項 size 下拉列表展開之後可見列表項的數目

（1）multiple屬性

語法：

 
<select multiple="multiple">
    <option>選項顯示的內容</option>
    ……
    <option>選項顯示的內容</option>
</select>

舉例：

在線測試

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <select multiple="mutiple">
        <option>HTML</option>
        <option>CSS</option>
        <option>jQuery</option>
        <option>JavaScript</option>
        <option>ASP.NET</option>
        <option>Ajax</option>
    </select>
</body>
</html>

在浏覽器預覽效果如下：

分析：

想要選取多項，使用“Ctrl+鼠標左鍵”即可。

（2）size屬性

下拉列表size屬性，用來定義下拉列表展開之後可見選項的數目。

語法：

 
<select multiple="multiple" size="可見列表項的數目">
    <option>選項顯示的內容</option>
    ……
    <option>選項顯示的內容</option>
</select>

舉例：

在線測試

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <select multiple="multiple" size="4">
        <option>HTML</option>
        <option>CSS</option>
        <option>jQuery</option>
        <option>JavaScript</option>
        <option>ASP.NET</option>
        <option>Ajax</option>
    </select>
</body>
</html>

在浏覽器預覽效果如下：

下拉列表<option>標簽屬性 <option>標簽屬性說明 value 選項值 selected 是否選中

option標簽value值，自不多說。selected屬性表示這個列表項是否選中，跟單選按鈕radio的checked是一樣的意思。

語法：

 
<select multiple="multiple" size="可見列表項的數目">
    <option value="選項值" selected="selected">選項顯示的內容</option>
    ……
    <option value="選項值">選項顯示的內容</option>
</select>

舉例：

在線測試

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <select multiple="multiple" size="5">
        <option>HTML</option>
        <option selected="selected">CSS</option>
        <option>jQuery</option>
        <option>JavaScript</option>
        <option>ASP.NET</option>
        <option>Ajax</option>
    </select>
</body>
</html>

在浏覽器預覽效果如下：

分析：

有些同學將size取值為1、2、3時，對360浏覽器無效，最低都有4個選項，而IE、火狐可以顯示。其實這是浏覽器默認所致，不同浏覽器對於一些標簽會有不同的樣式設置。就像按鈕button，在不同浏覽器，它的樣式也是不一樣的。

疑問

1、下拉列表中每個value值都是干嘛的？為什麼要設置value值呢？

value主要是用來向服務器傳遞數據用的，這個是後端技術的知識，暫時大家不需要深究，具體我們會在ASP.NET入門教程中講解到。

2、下拉列表的優點（與復選框等比較）

下拉列表占據空間比復選框小得多，默認情況下只顯示一個選項。