如何让HTML Select下拉框选中后显示VALUE/ID而非文本？

当然可以实现这个需求！我们可以通过监听下拉框的change事件，动态修改选中选项的显示文本，同时做好原文本的保存与恢复，避免影响后续的选择操作。

原始HTML代码 #

<select id='selUser' style='width: 200px;'> 
  <option value='0'>Select User</option> 
  <option value='1'>Yogesh singh</option> 
  <option value='2'>Sonarika Bhadoria</option> 
  <option value='3'>Anil Singh</option> 
  <option value='4'>Vishal Sahu</option> 
  <option value='5'>Mayank Patidar</option> 
  <option value='6'>Vijay Mourya</option> 
  <option value='7'>Rakesh sahu</option> 
</select>

实现代码（原生JavaScript） #

// 获取下拉框元素
const selectEl = document.getElementById('selUser');
// 提前保存value=1的选项的原始文本，防止修改后丢失
const originalOptionText = selectEl.options[1].text;

// 监听下拉框的change事件
selectEl.addEventListener('change', function() {
  const currentSelected = this.options[this.selectedIndex];
  
  // 判断当前选中的是否是value=1的选项
  if (currentSelected.value === '1') {
    // 将该选项的显示文本改为"1"
    currentSelected.text = '1';
  } else {
    // 切换到其他选项时，恢复原选项的文本
    selectEl.options[1].text = originalOptionText;
  }
});

代码说明 #

• 首先我们提前保存了value=1的选项的原始文本，这样后续切换回其他选项时可以恢复原状；
• 当用户选中value=1的选项时，立即修改该选项的显示文本为"1"，下拉框就会显示"1"；
• 当用户切换到其他选项时，把value=1的选项的文本恢复成原来的"Yogesh singh"，确保下次再选这个选项时的逻辑正常。

这种方法简单直接，不需要引入额外的库，完全基于原生JavaScript实现，兼容性也很好。

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