更改选择选项在选择后显示文本，但在更改选择时返回

Question

我想显示具有如下选择选项的国家/地区列表：

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

当用户选择一个国家/地区时，我只想将代码显示为所选选项。

这是我尝试过的：

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

    })

此代码将代码（正则表达式用于分隔数字）与所选选项分开，并显示它而不是全名，并且它有效。

但问题是，当我尝试选择其他一些国家时，之前的选项发生了变化！我无法把它拿回来。

它看起来像这样：

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

我应该如何实现这个目标？我在网上搜索过，没有结果。

Answer 1

我的版本::)

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

您可以存储以前选择的数据。
像这样：

 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>