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

你的问题很难理解。您想在下拉列表中显示标志、国家名称、国家代码，如果您选择一个，您希望将所选字段名称更改为标志、国家代码？

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

});

Answer 2

这个演示展示了如何改变当前选择的元素文本。国家名称 | 国家国际代码这就是你问的我这样做了，而不是使用演示字符串

点击演示

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