javascript - 如何使用带标志的语言获取下拉列表当前值？

Question

在下拉列表中，我们有 <a> 中的值列表标签。例如，我有带有标志的语言列表。默认选择英语。当我更改法语时，相应的标志也应该显示。有什么想法吗？

<div class="dropdown dropdown-lang">
    <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="flag-icon flag-icon-us"></span>
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <div class="dropdown-menu-col">
            <a href="javascript:;" id="English" onclick="translateLanguage(this.id);" class="dropdown-item current"><span class="flag-icon flag-icon-us"></span>English</a>
            <a href="javascript:;" id="Italian" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-it"></span>Italiano</a>
            <a href="javascript:;" id="Spanish" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-es"></span>Español</a>
            <a href="javascript:;" id="Belarus" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-by"></span>Беларускi</a>
            <a href="javascript:;" id="Polish" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-pl"></span>Polski</a>
            <a href="javascript:;" id="German" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-li"></span>Lietuviu</a>
            <a href="javascript:;" id="Chinese" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-cn"></span>Chinese</a>
        </div>
        <div class="dropdown-menu-col">
            <a href="javascript:;" id="German" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-de"></span>Deutsch</a>
            <a href="javascript:;" id="French" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-fr"></span>Français</a>
            <a href="javascript:;" id="Russian" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-ru"></span>Русский</a>
            <a href="javascript:;" id="Ukrainian" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-ua"></span>Українська</a>
            <a href="javascript:;" id="Czech" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-cz"></span>Česky</a>
            <a href="javascript:;" id="French" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-ch"></span>中國</a>
            <a href="javascript:;" id="Tamil" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-in"></span>தமிழ்</a>
        </div>
    </div>
</div>

Javascript:

<script>
    $(document).ready(function () {
        $('.dropdown-menu-col a').click(function () {
            $('.current').text($(this).text());
        });
    });
</script>

Answer 1

您可以通过操作带有旗帜图标的 span 的类来实现。浏览评论以获得更清楚的信息。

$(document).ready(function () {
  $('.dropdown-menu-col a').click(function () {
      //get the selected flag class
      var selectedFlag = $(this).find('span').attr('class');
      $('.current').text($(this).text());
      //remove the previous flag class
      $('.dropdown.dropdown-lang').find('button>span').removeClass();
      //add the newly selected flag class
      $('.dropdown.dropdown-lang').find('button>span').addClass(selectedFlag);
  });
});

a{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.0.0/css/flag-icon.min.css">
<div class="dropdown dropdown-lang">
    <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="flag-icon flag-icon-us"></span>
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <div class="dropdown-menu-col">
            <a href="javascript:;" id="English" class="dropdown-item current"><span class="flag-icon flag-icon-us"></span>English</a>
            <a href="javascript:;" id="Italian" class="dropdown-item"><span class="flag-icon flag-icon-it"></span>Italiano</a>
            <a href="javascript:;" id="Spanish" class="dropdown-item"><span class="flag-icon flag-icon-es"></span>Español</a>
            <a href="javascript:;" id="Belarus" class="dropdown-item"><span class="flag-icon flag-icon-by"></span>Беларускi</a>
            <a href="javascript:;" id="Polish"  class="dropdown-item"><span class="flag-icon flag-icon-pl"></span>Polski</a>
            <a href="javascript:;" id="German" class="dropdown-item"><span class="flag-icon flag-icon-li"></span>Lietuviu</a>
            <a href="javascript:;" id="Chinese" class="dropdown-item"><span class="flag-icon flag-icon-cn"></span>Chinese</a>
        </div>
        <div class="dropdown-menu-col">
            <a href="javascript:;" id="German" class="dropdown-item"><span class="flag-icon flag-icon-de"></span>Deutsch</a>
            <a href="javascript:;" id="French" class="dropdown-item"><span class="flag-icon flag-icon-fr"></span>Français</a>
            <a href="javascript:;" id="Russian" class="dropdown-item"><span class="flag-icon flag-icon-ru"></span>Русский</a>
            <a href="javascript:;" id="Ukrainian" class="dropdown-item"><span class="flag-icon flag-icon-ua"></span>Українська</a>
            <a href="javascript:;" id="Czech"  class="dropdown-item"><span class="flag-icon flag-icon-cz"></span>Česky</a>
            <a href="javascript:;" id="French"  class="dropdown-item"><span class="flag-icon flag-icon-ch"></span>中國</a>
            <a href="javascript:;" id="Tamil"  class="dropdown-item"><span class="flag-icon flag-icon-in"></span>தமிழ்</a>
        </div>
    </div>
</div>