列表框

在前面我们学习的列表当中，我们知道了<ul>、<ol>、<dl>这样的列表，还有一种列表，它经常出现在表单中，那就是<select> 标签。<select>标签可创建单选或多选菜单。

<select> 标签也有个组合，就是 <option>，就像<ul>和<li>必须配合使用一样。那<select>经常用在什么地方呢？比如：

图一，搜索框的下拉选择列表

图二，用在底部的友情链接

<select>的语法格式：

<select>
    <option></option>
</select>

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>列表框</title>
    </head>
    <body>
        <select>
          <option value ="李白">李白</option>
          <option value ="白居易">白居易</option>
          <option value="杜甫">杜甫</option>
          <option value="王维">王维</option>
          <option value ="李商隐">李商隐</option>
          <option value ="刘禹锡">刘禹锡</option>
          <option value="杜牧">杜牧</option>
          <option value="韩愈">韩愈</option>
        </select>
    </body>
</html>

运行浏览器后得到的效果如图

附加说明：<select> 标签实际上就是创建了一个下拉列表框，<option> 标签就是下拉列表的每条项目。<select> 标签不一定要放到<form>标签里，就像图二，只是作为展示的友情链接。

<select> 标签属性

属性	值	描述
disabled	disabled	规定禁用该下拉列表。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
size	number	规定下拉列表中可见选项的数目。

1、<select> 标签的 disabled 属性

disabled 属性规定禁用下拉列表。被禁用的下拉列表既不可用，也不可点击。

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>列表框</title>
    </head>
    <body>
        <select disabled="disabled">
          <option value ="李白">李白</option>
          <option value ="白居易">白居易</option>
          <option value="杜甫">杜甫</option>
        </select>
    </body>
</html>

运行浏览器后得到的效果如图

附加说明：可以设置 disabled 属性，直到满足某些条件（比如选择一个复选框），才恢复用户对该下拉列表的使用。然后，可以使用 JavaScript 来清除 disabled 属性，以使下拉列表变为可用状态。

2、<select> 标签的 multiple 属性

multiple 属性规定可同时选择多个选项。

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>列表框</title>
    </head>
    <body>
        <select multiple="multiple">
          <option value ="李白">李白</option>
          <option value ="白居易">白居易</option>
          <option value="杜甫">杜甫</option>
          <option value="王维">王维</option>
          <option value ="李商隐">李商隐</option>
          <option value ="刘禹锡">刘禹锡</option>
          <option value="杜牧">杜牧</option>
          <option value="韩愈">韩愈</option>
        </select>
    </body>
</html>

运行浏览器后得到的效果如图

附加说明：windows：按住 Ctrl 按钮来选择多个选项， Mac：按住 command 按钮来选择多个选项

3、<select> 标签的 name 属性

name 属性规定 select 元素的名称。

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>列表框</title>
    </head>
    <body>
        <select name="writerlist">
          <option value ="李白">李白</option>
          <option value ="白居易">白居易</option>
          <option value="杜甫">杜甫</option>
          <option value="王维">王维</option>
          <option value ="李商隐">李商隐</option>
          <option value ="刘禹锡">刘禹锡</option>
          <option value="杜牧">杜牧</option>
          <option value="韩愈">韩愈</option>
        </select>
    </body>
</html>

运行浏览器后得到的效果如图

附加说明：name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据，页面上不会显示name标题。

4、<select> 标签的 size 属性

size 属性规定下拉列表中可见选项的数目。

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>列表框</title>
    </head>
    <body>
        <select size="2">
          <option value ="李白">李白</option>
          <option value ="白居易">白居易</option>
          <option value="杜甫">杜甫</option>
          <option value="王维">王维</option>
          <option value ="李商隐">李商隐</option>
          <option value ="刘禹锡">刘禹锡</option>
          <option value="杜牧">杜牧</option>
          <option value="韩愈">韩愈</option>
        </select>
        <select size="8">
          <option value ="李白">李白</option>
          <option value ="白居易">白居易</option>
          <option value="杜甫">杜甫</option>
          <option value="王维">王维</option>
          <option value ="李商隐">李商隐</option>
          <option value ="刘禹锡">刘禹锡</option>
          <option value="杜牧">杜牧</option>
          <option value="韩愈">韩愈</option>
        </select>
    </body>
</html>