Jquery msDropdown显示不同的选定值

Question

是否可以在显示的所选字段中显示不同的值，而不是在下拉列表中显示的实际值？例如：我有一个国家列表：FLAG |国名|国家国际法典。

当我从列表中选择所需的国家/地区时，我只想要FAG |要显示的国际国际代码（不带名称）。

<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();

当用户选择时，例如'Belgique（+32）'我想在下拉列表的顶部可见部分显示'（+32）'。

Answer 1

本演示展示了如何更改当前所选元素文本FLAG |国名|国际国际代码这就是你所要求的，而不是使用演示字符串

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

你的问题很难理解。您想在下拉列表中显示标记，国家/地区，国家/地区代码，如果您选择要将所选字段名称更改为标记，国家/地区代码？

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

}）;