HTML 列表分类（1）下拉列表

最新推荐文章于 2025-01-03 21:12:12 发布

原创最新推荐文章于 2025-01-03 21:12:12 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文介绍了HTML下拉列表的优点，如节省页面空间、方便输入和规范输入，并讲解了如何实现多选功能，通过设置multiple属性允许用户通过Ctrl+单击选择多个选项。同时提到了size属性的应用，用于定义下拉列表显示的选项个数，当其值小于实际选项时，会显示滚动条。此外，还提及了如何使用optgroup对选项进行分组，以增强列表的组织性。

下拉列表
使用下拉列表的好处：
（1）节省页面空间，使得页面更加简洁
（2）方便输入
（3）规范输入

你来自：浙江河南江苏江西标签定义了一个下拉列表标签定义下拉列表的一个选项标签的name属性定义了提交的参数名标签的内容定义了该选项显示的文本，value属性定义了选中该选项时传递的参数值比方选择“江苏”并提交 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210524085731448.png)

提交的参数如下
在这里插入图片描述

多选可通过设置multiple属性来实现，ctrl+单击选择多个
在这里插入图片描述

在这里插入图片描述

传递的参数为
在这里插入图片描述

标签的size属性定义了下拉列表框显示的选项个数，当小于实际选项个数时，会自动增加一个滚动条。
可以使用对选项进行分组


```c
你打算购买小汽车的品牌：
<select>
<optgroup label="国产车">
<option value="红旗">红旗</option>
<option value="byd">比亚迪</option>
<option value="奇瑞">奇瑞</option>
</optgroup>
<optgroup label="德系车">
<option value="benz">奔驰</option>
<option value="bwm">宝马</option>
<option value="大众">大众</option>
</optgroup>
<optgroup label="日系车" disabled>
<option value="丰田">丰田</option>
<option value="本田">本田</option>
<option value="三菱">三菱</option>
</optgroup>
</select>


<optgroup>的label属性定义分组显示的文字，disabled设置该分组不能用。