使用<select>和<option>实现下拉菜单
下拉菜单是网页交互中常见的表单组件，主要用于让用户在预设的多个选项中选择单个或多个值，能够节省页面空间，提升信息录入效率。HTML中通过<select>标签定义下拉菜单容器，配合<option>标签定义具体的选项，二者结合即可快速实现基础的下拉菜单功能。
核心标签说明
实现下拉菜单的两个核心标签作用如下：
<select>：作为下拉菜单的容器，用于包裹所有可供选择的选项，也支持通过属性控制下拉菜单的行为，比如是否允许多选、默认显示的选项数量等。
<option>：用于定义下拉菜单中的每一个具体选项，需要放在<select>标签内部才会生效。
基础下拉菜单实现
最简单的下拉菜单只需要将多个<option>标签直接放在<select>标签内部即可，默认会展示第一个<option>的内容，用户点击下拉箭头后可以看到所有选项。
示例代码如下：
<form action="https://www.ipipp.com/submit" method="post"> <label for="city">选择所在城市：</label> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select> <button type="submit">提交</button> </form>
上述代码中，<select>的id属性用于和<label>标签的for属性关联，提升可访问性；name属性是表单提交时的参数名，用户选择的内容会以name=value的格式提交到后端。
常用属性配置
设置默认选中项
如果需要某个选项默认处于选中状态，只需要给对应的<option>标签添加selected属性即可，该属性是布尔属性，无需赋值。
<select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select>
实现多选下拉菜单
给<select>标签添加multiple属性，就可以允许用户选择多个选项，此时下拉菜单会显示为列表形式，用户按住Ctrl键（Windows系统）或Command键（Mac系统）点击即可选择多个选项。也可以通过size属性设置默认展示的选项数量。
<select id="hobby" name="hobby" multiple size="4"> <option value="reading">阅读</option> <option value="sports">运动</option> <option value="music"&音乐</option> <option value="travel">旅行</option> </select>
选项分组
如果下拉菜单的选项较多，可以使用<optgroup>标签对选项进行分组，提升可读性，<optgroup>的label属性用于定义分组名称，分组名称本身不可被选择。
<select id="course" name="course"> <optgroup label="前端开发"> <option value="html">HTML基础</option> <option value="css">CSS样式</option> <option value="js">JavaScript</option> </optgroup> <optgroup label="后端开发"> <option value="java">Java</option> <option value="python">Python</option> <option value="php">PHP</option> </optgroup> </select>
禁用状态设置
如果需要禁用整个下拉菜单或者单个选项，可以添加disabled属性。禁用后的下拉菜单或选项无法被用户选择或修改。
禁用整个下拉菜单：
<select id="city" name="city" disabled> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select>
禁用单个选项：
<select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai" disabled>上海（暂不可选）</option> <option value="guangzhou">广州</option> </select>
注意事项
<option>标签必须放在<select>标签内部才会被识别为下拉菜单的选项，不能单独使用。
<option>的
value属性是表单提交时的实际值，标签内部的内容是用户看到的可读文本，如果省略value属性，提交时会使用标签内部的文本作为值。如果需要获取用户选择的值，可以通过JavaScript操作<select>元素的
value属性，多选场景下可以通过遍历selectedOptions集合获取所有选中的值。