如何用JavaScript默认选中下拉框的第二个选项？

安全阿岳

2026-8-17

实现默认选中下拉框第二个选项的方案

基础实现代码

如果父div的类名确实是rule--field，且下拉框是它的直接子元素，你写的选择器document.querySelector(".rule--field > select")是有效的，直接用以下代码即可完成需求：

// 等待DOM完全加载后执行，避免元素未渲染导致获取失败
document.addEventListener('DOMContentLoaded', function() {
  // 获取目标下拉框元素
  const selectElement = document.querySelector(".rule--field > select");
  
  if (selectElement) {
    // 选中第二个选项（选项索引从0开始，第二个对应索引1）
    selectElement.selectedIndex = 1;

    // 也可以通过定位到第二个option元素来实现，效果一致
    // const secondOption = selectElement.querySelector('option:nth-child(2)');
    // if (secondOption) secondOption.selected = true;
  }
});

处理异步渲染场景

如果下拉框是第三方库异步生成的（比如依赖接口数据加载完成后才渲染），上面的代码可能会因为元素尚未存在而失效，此时可以用MutationObserver监听父元素的变化，直到下拉框出现再执行选中操作：

const parentElement = document.querySelector(".rule--field");
if (parentElement) {
  const observer = new MutationObserver(function(mutations) {
    const selectElement = parentElement.querySelector('select');
    // 确保下拉框存在且至少有2个选项
    if (selectElement && selectElement.options.length >= 2) {
      selectElement.selectedIndex = 1;
      // 完成操作后停止监听，避免重复触发
      observer.disconnect();
    }
  });

  // 配置监听规则：监听子元素的添加/移除
  observer.observe(parentElement, { childList: true, subtree: true });
}