如何使用纯JS修改select下拉框首个option选项的文本内容

你可以通过以下两种常用的纯JS方式实现需求：

方法1：通过select元素的options集合修改 #

优先给目标select加唯一id（避免页面多select时误改），修改后的HTML示例：

<select id="targetSelect">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

对应JS代码：

// 获取select元素
const select = document.getElementById('targetSelect');
// 第一个option的索引为*0*，直接修改text属性
select.options[0].text = 'Select here';

方法2：直接通过选择器定位第一个option #

如果不想给select加id，也可以直接用CSS选择器定位，代码更简洁：

// 选择页面第一个select的第一个option，修改文本内容
document.querySelector('select option:first-child').textContent = 'Select here';

注意事项 #

• 确保JS执行时DOM已经加载完成：如果你的JS代码放在<head>标签内，需要将修改逻辑包裹在DOMContentLoaded事件回调中，避免找不到元素报错：

  document.addEventListener('DOMContentLoaded', function() {
    // 此处放入修改option的代码
  });
  

• 若页面存在多个select元素，需要调整选择器精准定位目标元素，例如给select加类名后用document.querySelector('.my-select option:first-child')选择。

内容的提问来源于stack exchange，提问作者Kenneth Hedegaard