HTML怎么制作下拉选择菜单-html教程-PHP中文网

基础下拉菜单用作容器、定义选项，value为提交值、标签内文字为显示内容；加selected设默认项，disabled禁用选项，multiple启用多选并配合size控制可见行数。

html怎么制作下拉选择菜单

用 `<select></select>` 和 `<option></option>` 搭出基础下拉菜单

HTML 下拉菜单的核心就是 <select></select> 元素，它本身不显示选项，只提供容器和交互逻辑；所有可选内容必须用 <option></option> 子元素逐个声明。

常见错误是把文字直接写在 <select></select> 里（比如 <select>苹果、香蕉</select>），这不会生成选项，浏览器会忽略这些文本。

正确写法示例：

<select name="fruit"><option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option></select>

value 属性决定表单提交时实际发送的值，和显示文字可以不同（比如显示“北京”，value="bj"）
没设 value 的 <option></option>，提交时会以标签内文本作为值（不推荐依赖这个行为）
第一个 <option></option> 默认被选中，加 selected 属性可显式指定（如 <option selected>请选择</option>）

让下拉菜单有默认提示且不可提交

用户刚打开页面时，如果直接默认选中某个真实选项（比如“苹果”），可能造成误提交。更稳妥的做法是加一个占位选项，语义上表示“未选择”，并禁用它。

关键不是靠 CSS 隐藏，而是用 disabled + selected + 空或提示性 value：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<select name="city"><option value="" disabled selected>-- 请选择城市 --</option>
<option value="shanghai">上海</option>
<option value="beijing">北京</option></select>

disabled 让该选项无法被再次选中（鼠标点不动，键盘也跳过）
selected 确保加载时显示它，但因 disabled，表单提交时不会把它当有效值发送
value="" 是保险做法：即使某些老浏览器对 disabled selected 支持不一致，空值也更容易被后端忽略

多选下拉菜单要加 `multiple` 属性

原生 <select></select> 支持多选，但必须显式添加 multiple 布尔属性，且用户操作方式和单选不同：需按住 Ctrl（Windows）或 Cmd（macOS）点击，或拖拽选择连续项。

浏览器渲染效果也会变化——默认高度变高，通常显示 4–6 行选项（可由 size 属性控制行数）。

<select name="hobbies" multiple size="4"><option value="reading">阅读</option>
<option value="swimming">游泳</option>
<option value="coding">编程</option></select>

提交时，同名字段会变成数组（如 hobbies=reading&hobbies=coding），后端需按数组接收
移动端多选体验较差，很多手机浏览器仍只允许单点（然后立刻关闭下拉），实际项目中常被自定义组件替代
size 值设为 1 时，即使有 multiple，视觉上仍是单行下拉，但功能上仍支持多选（需配合 Ctrl/Cmd）

不能只靠 HTML 实现搜索过滤或分组

原生 <select></select> 不支持输入搜索、虚拟滚动、图标、禁用部分选项等交互增强。想实现“带搜索的下拉”，必须用 JavaScript 配合自定义 DOM 结构（比如 <div> + <code><input> + <ul></ul>）模拟。

常见的 <optgroup></optgroup> 只能做静态视觉分组，不能折叠/展开，也不能禁用整个组：

<select><optgroup label="水果">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</optgroup>
<optgroup label="蔬菜"><option value="carrot">胡萝卜</option></optgroup></select>