显示下拉选择的值

Question

我有一个简单的 twitter 引导下拉菜单标记，我需要在其中显示选定的值，但它没有发生。

<div class="container" style="padding-top: 10em;">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                        Select                         <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">APP1</a></li>
                        <li><a href="#">APP2</a></li>
                        <li><a href="#">APP3</a></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('.dropdown-menu a').click(function () {
            //Need to show the selected Value
        });
    });
</script>

在上面的代码中，点击事件正在工作，但值没有被选中和显示。 怎么办？

Answer 1

您可以直接使用引导程序“click.bs.dropdown”事件来代替jQuery click。

我的sn-p：

$(function () {
  
  $('.dropdown').on('click.bs.dropdown', 'a', function (e) {
    $('.dropdown .btn:first-child')[0].childNodes[0].textContent = e.target.textContent + ' ';
  });

  // In order to start with an element selected you can:
  $('.dropdown').find('a:contains("APP3")').trigger('click.bs.dropdown');
  
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container" style="padding-top: 10em;">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                        Select                         <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">APP1</a></li>
                        <li><a href="#">APP2</a></li>
                        <li><a href="#">APP3</a></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</div>

Answer 2

使用$(this).text() 获取选定值文本：

$(document).ready(function () {
   $('.dropdown-menu a').click(function () {
      console.log($(this).text());
      var cache = $('.btn-primary').children();
      $('.btn-primary').text($(this).text()).append(cache);
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container" style="padding-top: 10em;">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                        Select                         <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">APP1</a></li>
                        <li><a href="#">APP2</a></li>
                        <li><a href="#">APP3</a></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</div>