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