文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。
这篇瑶琴带大家学习 <select> 标签的用法。
<select> 标签的用法 <select> 标签用于创建下拉列表，允许用户从预定义的选项中进行选择。下面是关于 <select> 标签的详细介绍。
- 创建
<select>元素
<select id="fruitSelect">
<!-- 在这里添加选项 -->
</select>
-
添加选项
<option>元素 在<select>标签内添加一个或多个<option>标签，每个<option>表示一个可选项。
<select id="fruitSelect">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
</select>
-
设置选项的文本和值 使用 value 属性为每个选项指定一个值，这个值会在用户选择该选项时提交到服务器或用于 JavaScript 操作。
-
默认选中项 使用 selected 属性在 option> 标签中指定哪个选项在页面加载时应该被默认选中。
<select>
<option value="apple">苹果</option>
<option value="banana" selected>香蕉</option>
</select>
属性介绍：
1.id: 为 元素指定一个唯一的标识符。 2.name: 为 元素指定名称，用于在表单中提交数据。
3.multiple: 允许用户选择多个选项。
4.disabled: 禁用下拉列表。
5size: 指定可见的行数，用于显示多个选项
完整的代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Example</title>
</head>
<body>
<h1>Select Example</h1>
<!-- 单选下拉列表 -->
<label for="fruits">Choose a fruit:</label>
<select id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
</select>
<!-- 多选下拉列表 -->
<label for="colors">Choose colors:</label>
<select id="colors" multiple>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<script>
// 获取选中的单选列表选项
const fruitsSelect = document.getElementById('fruits');
fruitsSelect.addEventListener('change', () => {
const selectedFruit = fruitsSelect.value;
console.log('Selected fruit:', selectedFruit);
});
// 获取选中的多选列表选项
const colorsSelect = document.getElementById('colors');
colorsSelect.addEventListener('change', () => {
const selectedColors = Array.from(colorsSelect.selectedOptions).map(option => option.value);
console.log('Selected colors:', selectedColors);
});
</script>
</body>
</html>
下面详细介绍下 select 标签的用法：
使用 value 属性
每个 标签都有一个 value 属性，它定义了在用户选择该选项时发送到服务器的值，或者在 JavaScript 中进行处理的值。例如：
<select>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</select>
如果用户选择了 "香蕉"，则会向服务器发送值 "banana"。
默认选中项
你可以通过在 标签中使用 selected 属性来设置默认选中的选项：
<select>
<option value="apple">苹果</option>
<option value="banana" selected>香蕉</option>
</select>
结合 JavaScript 使用
你可以使用 JavaScript 来监听用户选择的事件，以及获取选中的选项值。以下是一个示例：
<select id="colorSelect">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<script>
const colorSelect = document.getElementById('colorSelect');
colorSelect.addEventListener('change', () => {
const selectedColor = colorSelect.value;
console.log('选中的颜色是：', selectedColor);
});
</script>
看到这里的朋友，相信即使是小白，也能够吸收这篇 标签的内容。 最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
