如何在不改动option标签值与文本的情况下修改Select框显示文本

嘿，这个需求很好解决！你想要选择带国家名称的选项后，下拉框只显示区号（比如选"+91 India"就显示"+91"），同时完全保留<option>里原有的文本和值对吧？我给你一个简单靠谱的方案：

方案：用模拟显示元素替代原生Select的视觉展示 #

这个方法不会修改任何<option>的内容，只是用一个视觉元素模拟下拉框的显示效果，原生Select的功能完全保留。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<body>
<!-- 用容器包裹模拟元素和原生Select，点击容器时触发原生Select展开 -->
<div class="custom-select" onclick="document.getElementById('mySelect').click()">
  <!-- 用来显示选中区号的模拟元素 -->
  <span id="select-display">+91 India</span>
  <!-- 隐藏原生Select，但保留其功能 -->
  <select id="mySelect" onchange="countryChange()" style="display: none;">
    <option value="+91">+91 India</option>
    <option value="+45">+45 Denmark</option>
  </select>
</div>

<script>
function countryChange() {
  const selectElem = document.getElementById('mySelect');
  const displayElem = document.getElementById('select-display');
  
  // 将模拟元素的文本设置为选中选项的value（即区号）
  displayElem.textContent = selectElem.value;
  
  // 这里可以保留你原来的业务代码
  // document.getElementById('mySelect').value = 'some value';
}
</script>
</body>
</html>

补充优化：给模拟容器加样式（可选） #

如果想让模拟的下拉框看起来更像原生控件，可以加一点CSS：

.custom-select {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px 30px 5px 8px;
  border-radius: 4px;
  background-color: white;
  position: relative;
  cursor: pointer;
  min-width: 100px;
}

.custom-select::after {
  content: '▼';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}

#select-display {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

关键说明 #

• 原生Select的所有功能都保留：表单提交时依然会传递选中选项的value，不会影响后端逻辑；
• 完全不修改<option>的内容：展开下拉列表时，依然能看到原有的"+91 India"、"+45 Denmark"文本；
• 点击模拟容器会触发原生Select展开，用户体验和原生控件一致。

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