显示下拉选择的值

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

使用$(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>

Answer 2

而是使用jQuery click可以使用直接引导 “click.bs.dropdown” 事件。

我的片段：

$(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>