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

您可以添加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 2

我的版本:: :)

＆＃13;

    $( "#country_code" ).change( function()
    {
        var $this = $( this )

        $this.find( "option:first" ).text( '+' + $this.val() ).val( $this.val() ).prop( 'selected', true )
    } )

＆＃13;

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

＆＃13;

Answer 3

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

 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>

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

3 个答案: