Show Value Instead of text in select option

Question

I have country codes dropdown list, in select option text there countryname and ISD Code together, but I want only show ISD Code after Selection.

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

I have searched for some other forums but I am not able to get how to do this. like if we select Anguilla, then it should show +1 there and if it is selected Angola, it should show +244

Answer 1

A solution with only a <select> element.

How it works:

• Initializes a hidden <option> that will be used for showing the selected option's value.
• When an option is selected:
  • affects to the hidden option's value attribute and text content the value attribute of the just selected option if this value is not empty . Then shows that hidden option.
  • empties value and text content of that option, then hides it, if the chosen value is empty ( Country code option here) .

 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

You can handle change event of select tag like this.

I updated code for display selected value as selected text.

$("#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" />