在 HTML 表单中,<select> 和 <option> 是创建下拉菜单的核心元素。本文将通过示例、代码和说明,帮助你全面掌握它们的用法。
<select> 定义一个下拉列表,而每个 <option> 表示一个可选项。
<label for="fruit">请选择一种水果:</label>
<select id="fruit">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
value:选项提交给服务器时的值(若未设置,则使用显示文本)。selected:默认选中的选项。disabled:禁用某个选项或整个下拉框。multiple:允许用户选择多个选项(需按住 Ctrl 或 Cmd)。<select>
<option value="red">红色</option>
<option value="green" selected>绿色(默认)</option>
<option value="blue" disabled>蓝色(不可选)</option>
</select>
<select multiple size="4">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
你可以通过 JavaScript 获取用户选择的值,并做出响应。
<select> 添加 <label> 提升可访问性。optgroup 对选项分组。