javascript - 选择后更改选择选项显示的文本但在更改选择时返回

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>