使用select和option标签创建下拉列表,通过value传递数据、文本显示给用户,默认选中用selected属性,disabled禁用选项,optgroup实现分组,multiple支持多选并配合name属性确保表单正确提交。

在HTML中创建下拉列表,主要使用 select 和 option 标签。这种控件常用于表单中,让用户从多个选项中选择一个或多个值。
基本的下拉列表结构
使用 select 标签定义下拉框,内部用多个 option 标签表示可选项。
示例:
用户点击下拉框时,会看到这三个选项,选择后表单提交的是 value 的值,而显示给用户的是标签之间的文字。
立即学习“前端免费学习笔记(深入)”;
设置默认选中项
通过为某个 option 添加 selected 属性,可以让该选项默认被选中。
示例:
页面加载时,“选项一”会作为当前选中值显示。
添加禁用选项和分组
有时需要某些选项不可选,或对选项进行分类分组。
- 使用 disabled 属性让某个选项无法被选择:
分组后界面更清晰,用户体验更好。
支持多选和设置名称
如果希望用户能选择多个选项,添加 multiple 属性。
配合 name 属性,确保表单提交时能正确传递数据:
多选时通常按住 Ctrl 或 Cmd 键进行选择。
基本上就这些。掌握 select、option、optgroup 和相关属性,就能灵活创建各种下拉列表。不复杂但容易忽略细节,比如 value 和显示文本的区别,或是忘记设 name 导致表单取不到值。











