更改选择选项显示的文本，但返回更改选择

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

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

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 2

你可以添加data属性来实现你想要的。您可以在实际文本中添加data-text属性，在change事件中，您可以先将选项text重设为原始。

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

第2部分：您甚至不需要任何regx添加为option value有你需要的东西！

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

我的版本：:)

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