如何实现下拉选择框选中后仅显示ISD代码而非完整文本？

嘿，这个需求其实用原生JavaScript就能轻松搞定！核心思路是保存每个选项的原始完整文本，在用户选中选项后，只把当前选中项的显示文本替换成ISD代码（也就是选项的value值），同时确保下拉菜单展开时还能看到完整的国家名+代码。

完整实现代码 #

<select class="form-control-input" name="country_isd_code" id="country_isd_code">
  <option value="">Country Code</option>
  <option value="+244">Angola (+244)</option>
  <option value="+1">Anguilla (+1)</option>
</select>

<script>
const countrySelect = document.getElementById('country_isd_code');

// 第一步：提前保存所有选项的原始完整文本，存在自定义属性里
Array.from(countrySelect.options).forEach(option => {
  option.dataset.fullText = option.textContent;
});

// 第二步：监听下拉框的change事件，动态修改显示文本
countrySelect.addEventListener('change', function() {
  // 先把所有选项的文本恢复成原始状态，保证下拉菜单里能看到完整内容
  Array.from(this.options).forEach(option => {
    option.textContent = option.dataset.fullText;
  });
  
  // 把当前选中的选项文本替换成对应的ISD代码
  const selectedOption = this.options[this.selectedIndex];
  if (selectedOption.value) {
    selectedOption.textContent = selectedOption.value;
  }
});

// 第三步：页面加载完成后，处理默认选中的选项（如果有的话）
document.addEventListener('DOMContentLoaded', function() {
  const selectedOption = countrySelect.options[countrySelect.selectedIndex];
  if (selectedOption.value) {
    selectedOption.textContent = selectedOption.value;
  }
});
</script>

原理说明 #

• 保存原始文本：用dataset.fullText这个自定义属性把每个选项的原始文本（比如Angola (+244)）存起来，避免修改后丢失。
• 恢复下拉菜单内容：每次用户切换选项时，先把所有选项的文本恢复成原始状态，这样打开下拉框时还是能看到完整的国家名+代码，不影响用户选择。
• 修改选中项显示：最后把当前选中的选项文本替换成它的value（也就是ISD代码），达到选中后只显示代码的效果。

兼容性说明 #

这个方案是纯原生JS实现，兼容所有现代浏览器。如果需要兼容IE11，只需要把Array.from()换成Array.prototype.slice.call()就行，比如：

// 替换Array.from的写法
Array.prototype.slice.call(countrySelect.options).forEach(option => {
  option.dataset.fullText = option.textContent;
});

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