使用select和option标签可创建下拉菜单,常用于表单选择;通过name属性命名、value传递数据、selected设置默认项、disabled禁用选项或菜单,语义正确即可高效实现功能。
在HTML中制作下拉菜单,主要使用 select 和 option 标签。这种菜单常用于表单中,比如选择地区、性别、年份等场景,操作简单且节省页面空间。
基本语法结构
使用 定义下拉菜单容器,内部用多个 表示可选项。
示例代码:
用户点击时会弹出列表,选择后显示所选项的内容。value值通常用于提交表单,而标签内的文字是显示给用户的名称。
设置默认选中项
通过在某个 option 上添加 selected 属性,可以让该选项默认被选中。
例如:
页面加载时,“深圳
”会作为当前选中值展示。若多个选项都加了 selected,只有第一个生效。
为下拉菜单命名以便提交数据
在表单中使用时,必须给 select 添加 name 属性,否则数据无法随表单提交。
示例:
用户选择“上海”并提交后,服务器将收到 city=sh 的数据。
禁用特定选项或整个菜单
如果想让某一项不可选,可在 option 上加 disabled 属性:
也可在 select 上加 disabled 来禁用整个下拉框:
基本上就这些。select标签虽然简单,但结合name、value和selected属性后,在实际开发中非常实用。注意语义正确,避免嵌套错误,就能顺利实现功能。








