Question

我的问题是，在选择下拉列表中的选项后，下拉列表中的箭头会消失。有谁知道如何解决这一问题？谢谢你的所有答案。

选择之前：

选择后：

HTML代码：

<div class="container">
<div class="row">
    <hr>
    <div class="dropdown">
        <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
            Select Pre-Processing Method <span class="caret"></span>
        </a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Normalisation</a></li>
          <li><a href="#">Histogram Equalisation</a></li>
          <li class="divider"></li>

          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Hover me for more options</a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Second level</a></li>
              <li class="dropdown-submenu">
                <a href="#">Even More..</a>
                <ul class="dropdown-menu">
                    <li><a href="#">3rd level</a></li>
                    <li><a href="#">3rd level</a></li>
                </ul>
              </li>
              <li><a href="#">Second level</a></li>
              <li><a href="#">Second level</a></li>
            </ul>
          </li>
        </ul>
    </div>
</div>

Answer 1

如果要将下拉文本替换为用户选择的项目文本（包括插入符号），可以尝试以下操作。

$(".dropdown-menu li a").click(function(){
    var link = $(this);
    // You can remove these two lines if you don't want to mark
    // the selected item as active in the dropdown menu
    link.closest('ul').find('li.active').removeClass('active');
    link.parent().addClass('active');

    var dropdown = link.closest('.dropdown').find('#dLabel');
    dropdown.html($(this).html() + ' <span class="caret"></span>');
});

这是 Bootply
http://www.bootply.com/72qTbDbEC0

如何在选择后再次显示下拉箭头？

1 个答案: