HTML下拉框默认选中第N项需设置selectedIndex属性或value属性； selectedIndex从0开始，-1表示无选中项，动态设置前须确保DOM就绪且选项存在。
HTML下拉框怎么设计数
HTML 下拉框本身不提供“设计数”功能，你实际想做的，是让 <select></select> 元素在页面加载时默认选中某个选项（比如第 3 个），或通过 JS 控制其选中索引。关键不是“设计数”，而是设置 selectedIndex 属性或 value 属性。
-
selectedIndex是只读/可写属性，表示当前选中项的索引（从 0 开始），直接赋值即可切换选中项 -
value更常用，它依赖每个<option></option>的value属性值，与索引无关，但更语义化、不易受 DOM 变动影响 - 若用索引控制，务必确保
<select></select>已渲染完成（比如放在底部，或等DOMContentLoaded）
获取下拉框当前选中索引值
用 selectedIndex 最直接。注意：如果没选中任何项（比如所有 <option></option> 都没设 selected，且没设 value 匹配），selectedIndex 为 -1。
const select = document.getElementById('mySelect');
console.log(select.selectedIndex); // 输出当前选中项索引，如 2
- 这个值是实时的，修改
select.value或点击切换后会自动更新 - 不要用
select.options[select.selectedIndex]再去取文本 —— 直接用select.value或select.selectedOptions[0].text更稳妥 - 如果下拉框是多选（
multiple），selectedIndex只返回第一个选中项索引，此时应遍历selectedOptions
设置下拉框默认选中第 N 项（按索引）
两种主流方式：HTML 属性声明（静态）和 JS 动态设置（运行时）。推荐优先用 value，仅当必须按位置控制时才用索引。
<select id="mySelect">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="cherry">樱桃</option>
</select>
<script>
const sel = document.getElementById('mySelect');
sel.selectedIndex = 1; // 页面加载后强制选中第 2 项（香蕉）
</script>
- 若 HTML 中已写
<option selected></option>，JS 设置selectedIndex会覆盖它 - 设置前检查
sel.options.length > N，避免selectedIndex = 999导致静默失败（不会报错，但选中无效项） - 移动端 Safari 对快速连续设置
selectedIndex有渲染延迟，建议加requestAnimationFrame包裹
为什么有时 selectedIndex 总是 -1？
常见于 DOM 尚未就绪、元素未找到、或 <select></select> 被 JS 框架（如 Vue/React）接管后原生属性失效。不是浏览器 Bug，而是执行时机或上下文问题。
立即学习“前端免费学习笔记（深入）”；
- 检查是否在
<select></select>标签之前执行 JS —— 把脚本移到前，或监听DOMContentLoaded - 确认元素 ID 正确，且没有重复 ID；用
document.querySelector替代getElementById排查作用域问题 - 若用 jQuery，别混用
$(...).prop('selectedIndex')和.attr()——selectedIndex是 property，不是 attribute - 某些 UI 库（如 Element UI）把原生
<select></select>隐藏了，你操作的是封装层，得查对应组件文档找 API
selectedIndex，加一行 console.log(sel.selectedOptions.length) 看看有没有真选中。 
