Changing select option displayed text after it is selected but return when changing the selection

Question

I want to show list of countries with select options like this:

<select id="country_code">
    <option value="358"> Finland(+358)</option>
    <option value="33"> France(+33)</option>
    <option value="43"> Austria(+43)</option>
</select>

When user selects a country, I want only the code to be displayed as the selected option.

This is what I've tried:

 $("#country_code").change(function(){
        $(this).find("option:selected").text("+"+$(this).find("option:selected").text().match(/(\d+)/g));

    })

This code is separating the Code (regex is for separating the number) from selected option and displays it instead of the full name, and it works.

But the problem is when I try to select some other countries, the previous options have changed! and i can not get it back.

it look like this :

<select id="country_code">
    <option value="358"> +358</option>
    <option value="33"> France(+33)</option>
    <option value="43"> +43</option>
</select>

How should I accomplish this? I have searched online with no results.

Answer 1

My version: :)

 $( "#country_code" ).change( function() { var $this = $( this ) $this.find( "option:first" ).text( '+' + $this.val() ).val( $this.val() ).prop( 'selected', true ) } )

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="country_code"> <option value="" style="display: none;" selected="selected">select a country</option> <option value="358"> Finland(+358)</option> <option value="33"> France(+33)</option> <option value="43"> Austria(+43)</option> </select>

Answer 2

You can add data attributes to achieve what you want. You can add a data-text attribute with actual text and on change event you can first reset the options text to original.

 $("#country_code").change(function() { //reset options to there actual texts $(this).find("option").each(function(){ $(this).text($(this).data('text')); }); var selectedOption = $(this).find("option:selected"); selectedOption.text("+" + selectedOption.text().match(/(\d+)/g)); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="country_code"> <option value="358" data-text="Finland(+358)">Finland(+358)</option> <option value="33" data-text="France(+33)">France(+33)</option> <option value="43" data-text="Austria(+43)">Austria(+43)</option> </select>

PART 2 : You don't even need to add any regx as the option value has what you need!

 $("#country_code").change(function() { //reset options to there actual texts $(this).find("option").each(function(){ $(this).text($(this).data('text')); }); var selectedOption = $(this).find("option:selected"); selectedOption.text("+" + selectedOption.val()); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="country_code"> <option value="358" data-text="Finland(+358)">Finland(+358)</option> <option value="33" data-text="France(+33)">France(+33)</option> <option value="43" data-text="Austria(+43)">Austria(+43)</option> </select>

Answer 3

You can store the previous selected data.
like this:

 var $previousOption,storedText; $("#country_code").change(function(){ if($previousOption!=null){ $previousOption.text(storedText) } $previousOption=$(this).find("option:selected"); storedText=$previousOption.text(); $(this).find("option:selected").text("+"+$(this).find("option:selected").text().match(/(\d+)/g)); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="country_code"> <option value="358"> Finland(+358)</option> <option value="33"> France(+33)</option> <option value="43"> Austria(+43)</option> </select>

Answer 4

I understand that you wish to do this using Jquery or vanilla JS. But Material UI has an excellent component called <Select> , which has a prop called renderValue , which does exactly this, with much less work. Check it out.