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>

如何使用带有标志的语言获取下拉当前值？

1 个答案: