I want to show list of countries with select options like this:

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

When user selects a country, I want only the code to be displayed as the selected option.

This is what I've tried:

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

    })

This code is separating the Code (regex is for separating the number) from selected option and displays it instead of the full name, and it works.

But the problem is when I try to select some other countries, the previous options have changed! and i can not get it back.

it look like this :

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

How should I acplish this? I have searched online with no results.

I want to show list of countries with select options like this:

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

When user selects a country, I want only the code to be displayed as the selected option.

This is what I've tried:

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

    })

This code is separating the Code (regex is for separating the number) from selected option and displays it instead of the full name, and it works.

But the problem is when I try to select some other countries, the previous options have changed! and i can not get it back.

it look like this :

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

How should I acplish this? I have searched online with no results.

• javascript
• jquery
• html

• What you want is the once a country has been selected its code should be displayed but once another country is selected the previous conutry with full name and code should appear? – Rahul Commented Dec 28, 2016 at 6:15
• yes @Rahul , Can not get back previous fullname, because its changed! – Ahmad Mobaraki Commented Dec 28, 2016 at 6:18

4 Answers 4

My version: :)

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

You can add data attributes to achieve what you want. You can add a data-text attribute with actual text and on change event you can first reset the options text to original.

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

PART 2 : You don't even need to add any regx as the option value has what you need!

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

You can store the previous selected data.
like this:

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

I understand that you wish to do this using Jquery or vanilla JS. But Material UI has an excellent ponent called <Select>, which has a prop called renderValue, which does exactly this, with much less work. Check it out.