网页表单里的下拉框随处可见：选择省份、选择年份、选择商品规格，背后都是同一个HTML组件。它由<select>元素作为容器，内部放置若干<option>标签充当选项。很多初学者第一次写的时候会把选项文字直接放在<select>标签里，结果页面上什么都没显示。这篇文章就把下拉框添加选项的正确姿势完整讲一遍，顺便把常用属性也覆盖到。
一、下拉框的基本结构：select与option的配合
一个最简单的下拉框只需要两个标签：外层的<select>定义这是一个下拉控件，内层的每一个<option>定义一个可选条目。浏览器会把所有option渲染成一个可以展开的列表，用户点选其中一项后，下拉框关闭并显示所选内容。
注意一个关键细节：<option>标签必须写在<select>标签内部，不能写成兄弟节点。同时，下拉框本身不承载文字内容，所有可见文字都来自option。下面是最基础的写法：
<select id="city"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select>
这段代码在页面上呈现为一个默认显示北京的下拉框，点击展开后可以看到四个城市。如果只写到这里，表单提交时浏览器会把选项文字本身作为值提交，功能上能用，但实际项目里几乎都会配合value属性使用，这也是下一节要讲的重点。
二、value属性：提交值与显示值的分离
value是option最重要的属性，它决定了表单提交时发送给服务器的数据。之所以要把提交值和显示文字分开，是因为两者经常不一致：用户看到的是中文城市名，后台数据库里存的可能是数字编号或拼音编码。
看下面这个改进后的例子，每个选项都配置了value：
<select name="city"> <option value="010">北京</option> <option value="021">上海</option> <option value="020">广州</option> <option value="0755">深圳</option> </select>
当用户选择上海并提交表单时，后台收到的数据是city=021，而不是文字上海。这种设计让前端展示与后端存储解耦，改显示文案时不必动数据库。除了value之外，option还有几个高频属性值得记住：
selected：设置某个选项为默认选中项，一个select里通常只放一个；disabled：禁用某个选项，用户能看到但无法点选，常用于置灰售罄的规格；label：给选项指定一个简短标签，某些浏览器渲染时会优先显示它。
举个综合运用的例子，默认选中广州，并把深圳置灰：
<select name="city"> <option value="010">北京</option> <option value="020" selected>广州</option> <option value="0755" disabled>深圳（暂停配送）</option> </select>
三、用optgroup给选项分组，长列表更清晰
当选项数量比较多且存在类别关系时，直接平铺一大串option会让用户找得很辛苦。HTML提供了<optgroup>标签用于分组，它有一个label属性显示分组标题，分组标题本身不可被选中，只起视觉归类作用。
比如做一个城市选择器，按区域划分：
<select name="city">
<optgroup label="华北地区">
<option value="010">北京</option>
<option value="022">天津</option>
</optgroup>
<optgroup label="华东地区">
<option value="021">上海</option>
<option value="0571">杭州</option>
</optgroup>
<optgroup label="华南地区" disabled>
<option value="020">广州</option>
</optgroup>
</select>渲染后每个分组标题会以加粗样式呈现，点击无法选中。给optgroup加disabled属性可以一次性禁用整个分组，上图中华南地区整体置灰就是这种效果。这种结构在省市区级联、商品分类筛选等场景里非常实用。
四、下拉框的多选与其他实用设置
select本身也有一些控制行为的属性，配合option使用时需要了解。multiple属性让下拉框变成多选列表，用户按住Ctrl或Shift即可选多项；size属性指定可见的行数，设置后下拉框会变成一个固定高度的滚动列表框。
<select name="skills" multiple size="4"> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JavaScript</option> <option value="php">PHP</option> <option value="go">Go</option> </select>
另外提醒一点：如果想在列表展开时给用户一句引导语，可以在第一个选项位置放一条类似请选择的占位项，并给它加上disabled和selected，这样默认显示占位文字，用户又选不回它，这是表单验证里常见的技巧。
<select name="city"> <option value="" disabled selected>-- 请选择城市 --</option> <option value="010">北京</option> <option value="021">上海</option> </select>
静态写死的选项只适合固定内容，实际开发中省份列表、分类数据往往来自接口。这种情况需要用JavaScript动态创建option再插入select，核心API是document.createElement配合appendChild，或者直接操作select的add方法。下面给一个简单示例：
<select id="fruit"></select>
<script>
var data = [
{ value: 'apple', text: '苹果' },
{ value: 'banana', text: '香蕉' },
{ value: 'orange', text: '橙子' }
];
var select = document.getElementById('fruit');
data.forEach(function (item) {
var opt = document.createElement('option');
opt.value = item.value;
opt.text = item.text;
select.appendChild(opt);
});
</script>掌握这些内容后，从最基础的单选下拉框到分组、多选、动态生成选项，基本覆盖了日常开发中绝大部分下拉框需求。写代码时记住核心原则：结构上option必须在select内部，数据上value给后台、文字给用户，属性上selected控制默认值、disabled控制可用性，遇到长列表就考虑optgroup分组。