Jquery msDropdown displaying different selected value

Question

Is it possible to display a different value in the selected field shown rather than the actual value displayed in the dropdown? eg: I have a list of countries: FLAG | Country Name | Country International Code.

When I select the desired country from the list, I want only the FAG | Country International Code to be displayed (without the name).

<select name="countries" id="countries">
         <option value='0033' class="fr" data-image="images/blank.gif" data-title="France"
                                            data-imagecss="flag fr">France (+33)</option>
         <option value='0032' class="be" data-image="images/blank.gif" data-title="Belgique"
                                            data-imagecss="flag be">Belgique (+32)</option>
</select>


$("#countries").msDropdown();

When the user selects, for example 'Belgique (+32)' I want to display just '(+32)' in the top visible part of the dropdown.

Answer 1

This Demo shows how the currently selected elements text can be altered FLAG | Country Name | Country International Code this is what you have asked i did that instead using a Demo String

Click for Demo

Jquery

$( "#garden" )
  .change(function() {
    var str = "";

      str = $("#garden option:selected" ).text();    
      alert(str.length);
      var n=str.indexOf("(");
       var n2=str.indexOf(")");
       alert(n);
     alert(n2);
     var s=str.substring(n,n2+1);
       alert(s);


     $("#garden option:selected" ).text(s);

    });

Html

<select id="garden" >
  <option>France (+33)</option>

  <option>germany(+43)</option>

  <option>india(+34)</option>
  <option>canda(+35)</option>
</select>

O/p

Answer 2

Your question is pretty hard to understand. You want to display flag, countryname, countrycode in a dropdown and in case you select one you want to change the selected field name to flag, countrycode?

http://jsfiddle.net/Zvfa9/

HTML:

<select class="country-select">
<option value="DE" data-full-name="FLAG | Germany | DE" data-short-name="FLAG | DE">FLAG | Germany | DE</option>
<option value="UK" data-full-name="FLAG | United Kingdom | UK" data-short-name="FLAG | UK">FLAG | United Kingdom | UK</option>

JS

$('.country-select').on('change', function () {
$('.country-select option').each(function () {
    fullName = $(this).data('full-name');
    $(this).text(fullName);
});
shortName = $('.country-select option:selected').data('short-name');
$('.country-select option:selected').text(shortName);

});