更改選擇選項顯示的文本，但返回更改選擇

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>