如何实现下拉选择框选中后仅显示国家代码？

要实现选中选项后仅展示国家代码，同时保留下拉时国家名称+代码的完整显示，可通过JavaScript监听元素事件来处理，以下是具体实现：

方法：原生JavaScript处理 #

步骤说明 #

1. 预存每个选项的原始文本到自定义属性，防止修改后无法恢复
2. 监听change事件，选中时将选项文本替换为带前缀+的国家代码
3. 监听focus事件，点击下拉框时恢复所有选项的原始文本，保证下拉时能看到完整信息
4. 页面加载完成后，自动处理默认选中的选项

完整代码示例 #

<select class="form-control" name="phone_code">
    <option value="93">Afghanistan (+93)</option>
    <option value="358-18">Aland Islands (+358-18)</option>
    <option value="355">Albania (+355)</option>
    <option value="213">Algeria (+213)</option>
</select>

<script>
const phoneCodeSelect = document.querySelector('select[name="phone_code"]');

// 保存所有选项的原始文本
Array.from(phoneCodeSelect.options).forEach(option => {
  option.dataset.originalText = option.textContent;
});

// 处理选中事件：替换为国家代码
phoneCodeSelect.addEventListener('change', function() {
  const selectedOpt = this.options[this.selectedIndex];
  selectedOpt.textContent = `+${selectedOpt.value}`;
});

// 处理聚焦事件：恢复原始文本
phoneCodeSelect.addEventListener('focus', function() {
  Array.from(this.options).forEach(option => {
    option.textContent = option.dataset.originalText;
  });
});

// 页面加载时初始化默认选中项的显示
document.addEventListener('DOMContentLoaded', function() {
  const defaultSelected = phoneCodeSelect.options[phoneCodeSelect.selectedIndex];
  defaultSelected.textContent = `+${defaultSelected.value}`;
});
</script>

效果说明 #

• 页面加载完成后，默认选中的选项会直接显示国家代码（如+93）
• 点击下拉框时，所有选项会恢复显示国家名称+代码的完整内容
• 选中任意选项后，下拉框会立刻切换为仅显示对应的国家代码

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