JavaScript 如何操作 select
你在网页上逛购物网站时，是不是常会碰到这种情况：选商品规格时，不用点任何按钮，一选“颜色”，“尺码”下拉框就自动更新成对应选项；或者表单里选“所在城市”，“区县”下拉框直接跳出匹配区域？这些不用刷新页面就动起来的下拉选择框，背后大多靠JavaScript来实现。今天就用最接地气的方式，讲讲怎么用JS操作网页上的select下拉框。
先搞懂select的基本结构
要操作select，得先知道它在网页里是什么样的——它就像个带弹簧的盒子，点击展开是一堆选项，选完收起来。用代码描述的话，大概是这样：
`html
<select id="citySelect">
<option value="">请选择城市</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
`
这里的id是“citySelect”，相当于给这个盒子贴了专属标签，JS要找它就得靠这个标签。里面的每个option就是盒子里的小纸条，value是选了之后传给服务器的数值，用户看到的文字是option中间的内容，比如“北京”。
选了哪个选项，JS能拿到吗？
先讲最常用的场景：当用户选了下拉框里的内容，JS怎么知道选了啥。还是用刚才的城市下拉框，我们加个小功能——选完城市，直接在页面上弹出“你选了XX”。
JS代码很简单，核心是“监听用户选选项的动作”：
`javascript
// 找到那个叫citySelect的盒子
const citySelect = document.getElementById("citySelect");
// 监听“选项变化”的动作
citySelect.addEventListener("change", function() {
// this就是当前的select，它的selectedIndex属性是选中的选项位置（从0开始）
// options里存了所有选项，所以this.options[this.selectedIndex]就是选中的那个选项
const selectedOption = this.options[this.selectedIndex];
// 弹窗显示选的内容，文字是selectedOption.innerText，数值是selectedOption.value
alert(你选了${selectedOption.innerText}，对应数值是${selectedOption.value});
});
`
举个生活化的例子：就像你去小卖部选冰棒，选了“绿豆冰棒”，老板手里的本子（select）就会记下“选的是绿豆”这个信息，JS就是帮你把老板记的信息拿出来用。
给select加选项，怎么加？
另一个常见场景：动态给下拉框加内容。还是城市的例子，要是想点个按钮，直接加个“广州”的选项，不用手动改HTML，JS就能搞定。
代码是这样的：
`javascript
// 找到城市下拉框
const citySelect = document.getElementById("citySelect");
// 创建一个新的option，相当于写一张新纸条
const newOption = document.createElement("option");
// 给新纸条写文字和数值
newOption.innerText = "广州";
newOption.value = "guangzhou";
// 把新纸条塞进select这个盒子里，就完成了添加
citySelect.appendChild(newOption);
`
这个场景就像你攒了新的游戏皮肤，直接放到背包（select）里，不用重新换背包——JS就是帮你把新内容塞进下拉框的工具。
清空或替换选项，怎么操作？
有时候需要把下拉框的内容全清掉，比如选了“北京”之后，“区县”下拉框得清空原来的选项，再加载北京对应的区县。清空的代码很简单：
`javascript
// 清空select里的所有option
citySelect.innerHTML = "";
`
要是想直接替换成新内容，比如把原来的城市选项全换成省份，就可以先清空，再一个个加新的省份option。
小提醒：别踩这些小坑
最后说两个新手容易犯的错：一是找select的时候，一定要确认id有没有写错——就像找同学，喊错名字肯定找不到；二是选项的索引是从0开始的，第一个选项是位置0，别数错数，不然可能会误选到“请选择”这种默认提示项。
学会这几个基本操作，不管是购物网站的规格联动，还是表单里的动态选择，你都能自己用JS搞定。