HTML下拉菜单通常使用<select>元素配合<option>元素创建。以下是基本用法和示例:
基本语法
<select name="菜单名称" id="菜单ID"><option value="值1">选项1</option><option value="值2">选项2</option><option value="值3" selected>选项3(默认选中)</option><option value="值4">选项4</option>
</select>常用属性
- •
name: 表单提交时的字段名 - •
id: 用于CSS或JavaScript操作 - •
disabled: 禁用下拉菜单 - •
multiple: 允许多选(按住Ctrl键选择多个) - •
size: 显示的行数(对于多选菜单)
对于<option>元素:
- •
value: 选中时提交的值 - •
selected: 默认选中此项 - •
disabled: 禁用此项
实际示例
简单下拉菜单
<label for="cars">选择汽车品牌:</label>
<select id="cars" name="cars"><option value="volvo">沃尔沃</option><option value="saab">萨博</option><option value="mercedes">奔驰</option><option value="audi">奥迪</option>
</select>分组选项(使用<optgroup>)
<select name="courses"><optgroup label="编程语言"><option value="js">JavaScript</option><option value="py">Python</option></optgroup><optgroup label="设计"><option value="ps">Photoshop</option><option value="ai">Illustrator</option></optgroup>
</select>多选下拉菜单
<select name="fruits" multiple size="4"><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange">橙子</option><option value="pear">梨</option>
</select>