javascript - 在选择选项中显示值而不是文本

Question

我有国家/地区代码下拉列表，在选择选项文本中将国家/地区名称和 ISD 代码放在一起，但我只想在选择后显示 ISD 代码。

<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>

我搜索了其他一些论坛，但我不知道如何执行此操作。就像如果我们选择安圭拉，那么它应该在那里显示+1，如果选择安哥拉，它应该显示+244

Answer 1

只有 <select> 的解决方案元素。

它是如何工作的:

• 初始化隐藏 <option>将用于显示所选选项的值。
• 当选择一个选项时:
  • 影响隐藏选项的 value属性和文本内容 value刚刚选择的选项的属性如果该值不为空。然后显示隐藏选项。
  • 清空value以及该选项的文本内容，然后隐藏它，如果所选值为空(此处为 Country code 选项)。

document.addEventListener('DOMContentLoaded', () => {
  const select = document.querySelector('select');
  
  select.addEventListener('change', () => {
    const value = select.value,
      showValueOption = select.querySelector('.show-value');
    
    if (value === '') {
      showValueOption.style.display = 'none';
      showValueOption.value = '';
      
      return;
    }
    
    showValueOption.style.display = '';
    showValueOption.innerText = value;
    showValueOption.value = value;
    
    select.selectedIndex = 0;
  });
});

<select class="form-control-input" name="country_isd_code" id="country_isd_code">
  <option class="show-value" value="" style="display:none;"></option>
  <option value="" selected>Country Code</option>
  <option value="+244">Angola (+244)</option>
  <option value="+1">Anguilla (+1)</option>
</select>