HTML多选下拉框怎么用_HTML中multiple属性实现多选下拉列表的方法

  • HTML多选下拉框怎么用_HTML中multiple属性实现多选下拉列表的方法已关闭评论
  • A+
所属分类：教程文章
摘要

通过添加multiple属性实现HTML多选下拉框，结合size设置可见行数，name属性用fruits[]格式提交数组，JavaScript可通过selectedOptions获取选中项，满足基本多选需求。

HTML多选下拉框怎么用_HTML中multiple属性实现多选下拉列表的方法

在HTML中实现多选下拉框，主要通过 select 元素的 multiple 属性来完成。加上这个属性后，用户就可以按住 Ctrl（或 Command 在 Mac 上）选择多个选项。

使用 multiple 属性创建多选下拉框

只需要在 select 标签中添加 multiple 属性，即可开启多选功能。浏览器会默认将其显示为一个可滚动的列表框，而不是传统的下拉菜单样式。

示例代码：

<select name="fruits" multiple><br>  <option value="apple">苹果</option><br>  <option value="banana">香蕉</option><br>  <option value="orange">橙子</option><br>  <option value="grape">葡萄</option><br></select>

控制可见行数 size 属性

默认情况下，多选框可能只显示几行。可以通过 size 属性指定可见的行数，提升用户体验。

例如显示 4 行：

<select name="fruits" multiple size="4"><br>  <option value="apple">苹果</option><br>  <option value="banana">香蕉</option><br>  <option value="orange">橙子</option><br>  <option value="grape">葡萄</option><br></select>

提交多选数据的注意事项

当表单提交时，只有被选中的选项会被发送。如果使用 PHP 接收数据，name 属性应以数组形式命名，如 name="fruits[]"，这样才能获取全部选中值。

HTML多选下拉框怎么用_HTML中multiple属性实现多选下拉列表的方法

Eva Design System

基于深度学习的色彩生成器

HTML多选下拉框怎么用_HTML中multiple属性实现多选下拉列表的方法
86

查看详情
HTML多选下拉框怎么用_HTML中multiple属性实现多选下拉列表的方法

立即学习“前端免费学习笔记（深入）”；

常见处理方式：

  • 前端：确保每个选中的 option 都有 value 值
  • 后端：用支持数组接收的参数名（如 fruits[]）
  • JavaScript 获取选中项：可用 selectedOptions 属性遍历

基本上就这些。加上 multiple 属性，配合 size 和正确的 name 命名，就能实现一个实用的多选列表。虽然样式不如现代组件灵活，但在原生 HTML 中足够应对基本需求。