HTML select控件

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-07-10 09:13:03

在HTML中，使用select元素来定义一个下拉列表或列表框。

HTML select控件

select元素的定义格式

<form action="form_example.asp" id="form1" name="form1">

 <label for="fruits">您喜欢的水果</label>

 <br>

 <select id="fruits" name="fruits">

  <option value="apple">苹果</option>

  <option value="pear">梨</option>

  <option value="banana">香蕉</option>

  <option value="cherry">樱桃</option>

  <option value="orange">桔子</option>

  <option value="durian">榴莲</option>

 </select>

</form>

上面的例子是关于<select>元素的一个典型用法。

id属性用于与<label>标签关联，以增强可访问性，也可以用于客户端脚本获取<select>选择的值。

name属性用于表单数据提交到服务器后以便使用名称检索提交的值。

<select>中的每项使用<option>标签进行定义，其应位于<select>和</select>之间。

每个<option>项包含一个value属性，当提交到服务器端时，服务器端会接收到被选中项的value值。

如果<option>中未定义value属性，value的值是包含在<option>和</option>之间的文本值。

开发人员可以在option元素中添加 selected属性，用于在页面加载后，默认选中添加selected属性的项。

上例在浏览器中的显示效果如下：

HTML select元素

select元素的multiple属性

multiple属性是一个布尔类型的属性。如果select元素指定了multiple属性，则允许用户选择多项，否则只能选择其中的一项。

当为select元素指定了multiple属性时，多数浏览器会将select元素显示为带滚动条的列表框。

<form action="form_example.asp" id="form2" name="form2">

 <label for="fruits">您喜欢的水果</label>

 <br>

 <select id="fruits" name="fruits" multiple>

  <option value="apple">苹果</option>

  <option value="pear">梨</option>

  <option value="banana">香蕉</option>

  <option value="cherry">樱桃</option>

  <option value="orange">桔子</option>

  <option value="durian">榴莲</option>

 </select>

</form>

该例显示效果如下：

HTML select multiple属性

从上图可以看出，当设置了multiple属性后，select元素呈现为列表框的形式，默认显示出4项。

用户通过滚动条可以查看其它项。

用户如果想选择多项的话可以使用以下几种方式：

（1）按住ctrl键，鼠标点击要选择或要取消选择的项；

（2）鼠标选中某一项，按住鼠标左键向上或向下连续选择相关项。

（3）鼠标选中某一项后，按住shift键，点击其他项，则位于两次点击之间的项将会被全部选中。

（4）鼠标选中某一项后，按住shift键，使用键盘中的Up或Down方向键连续选中相关项。

select元素的size属性

size属性用于设置select元素显示给用户的项数。size属性值是一个非负且大于0的整数值。

当未设置size属性且未指定multiple属性时，select默认显示一行（项）。

如果设置了了multiple属性而未设置size属性时，select默认显示4行（项）。

如果设置了size属性，则select将按照size属性给的值进行显示。

下面的代码是未指定multiple属性而指定了size属性时的例子。

<form action="form_example.asp" id="form3" name="form3">

 <label for="fruits">您喜欢的水果</label>

 <br>

 <select id="fruits" name="fruits" size="5">

  <option value="apple">苹果</option>

  <option value="pear">梨</option>

  <option value="banana">香蕉</option>

  <option value="cherry">樱桃</option>

  <option value="orange">桔子</option>

  <option value="durian">榴莲</option>

 </select>

</form>

其显示效果如下：

HTML select size属性

下面的代码是指定了multiple属性和size属性时的例子。

<form action="form_example.asp" id="form4" name="form4">

 <label for="fruits">您喜欢的水果</label>

 <br>

 <select id="fruits" name="fruits" size="3" multiple>

  <option value="apple">苹果</option>

  <option value="pear">梨</option>

  <option value="banana">香蕉</option>

  <option value="cherry">樱桃</option>

  <option value="orange">桔子</option>

  <option value="durian">榴莲</option>

 </select>

</form>

其显示效果如下：

HTML select的size属性和multiple属性

分组列表项

可以使用<optgroup>元素可以对select元素中的选项进行分组。

<form action="form_example.asp" id="form4" name="form4">

 <label for="lang">WEB设计语言</label>

 <br>

 <select id="lang" name="lang">

  <optgroup label="前端">  

   <option value="HTML">HTML</option>

    <option value="CSS">CSS</option>

    <option value="JavaScript">JavaScript</option>

   </optgroup>

   <optgroup label="后端">

    <option value="JSP">JSP</option>

    <option value="PHP">PHP</option>

    <option value="ASP.NET">ASP.NET</option>

  </optgroup>

 </select>

</form>