时间戳

首页 > 解决方案 > 在选择选项中显示值而不是文本

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

问题描述

我有国家代码下拉列表，在选择选项文本中有国家名称和 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

标签： javascriptforms

解决方案

只有一个<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>

推荐阅读