Показать значение вместо текста в опции выбора

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>

Answer 2

Вы можете обработать событие изменения тега select следующим образом.

Я обновил код для отображения выбранного значения в качестве выделенного текста.

$("#country_isd_code").change(function(){
  $("#codeselect").val($(this).val());
})

$("#country_isd_code").change(function(){
  $("#codeselect").val($(this).val());
  //$("#country_isd_code option:selected").text($(this).val());
 
  $("#selecteditem").val($(this).val())
  $("#selecteditem").text($(this).val())
   $("#selecteditem").prop('selected', true);
   $("#selecteditem").show();
})

#selecteditem{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control-input" name="country_isd_code" id="country_isd_code">
    <option id="selecteditem" value=""></option>
    <option value="">Country Code</option>                                                                                                                             
   <option value="+244">Angola (+244)</option>
    <option value="+1">Anguilla (+1)</option>
    </select>
   
   <input type="text" id="codeselect" />