如何通过JavaScript修改下拉框选中后的显示文本（保留选项原内容）

要实现选中选项后显示自定义文本、展开下拉时保留原选项文本且不改变下拉框值的需求，可以通过监听下拉框的focus、blur和change事件，结合保存选项原始文本的方式实现，具体方案如下：

核心思路 #

1. 预先保存每个选项的原始文本，避免后续修改后丢失
2. 当下拉框获得焦点（即将展开）时，恢复所有选项的原始文本，确保展开后显示内容正常
3. 当下拉框失去焦点或选中选项时，将当前选中项的文本替换为自定义内容

完整代码示例 #

<select id="training" name="TrainingTopic">
       <option value="training 10">training 10</option>
       <option value="training 9">training 9</option>
</select>

<script>
// 获取目标下拉框元素
const selectEl = document.getElementById('training');

// 保存每个选项的原始文本到dataset中
Array.from(selectEl.options).forEach(option => {
  option.dataset.originalText = option.textContent;
});

// 根据选项值生成自定义显示文本
function generateCustomText(value) {
  return `您已选中${value}`;
}

// 恢复所有选项的原始文本
function restoreOriginalTexts() {
  Array.from(selectEl.options).forEach(option => {
    option.textContent = option.dataset.originalText;
  });
}

// 更新选中项的显示文本为自定义内容
function updateSelectedText() {
  const selectedOption = selectEl.options[selectEl.selectedIndex];
  selectedOption.textContent = generateCustomText(selectedOption.value);
}

// 监听焦点事件：展开下拉前恢复原始文本
selectEl.addEventListener('focus', restoreOriginalTexts);

// 监听失焦事件：收起下拉后显示自定义文本
selectEl.addEventListener('blur', updateSelectedText);

// 监听选择事件：选中选项后立即更新显示文本
selectEl.addEventListener('change', updateSelectedText);
</script>

说明 #

• 下拉框的value属性始终保持原始值，不会因为文本修改而改变，不影响表单提交或后续逻辑
• 每次展开下拉框时，所有选项都会恢复原始文本，确保用户看到的选项内容正确
• 自定义文本规则可以通过修改generateCustomText函数灵活调整，比如针对不同选项设置不同的自定义文本

内容的提问来源于stack exchange，提问作者David Gasuk