从下拉列表中获取所选文本，但使用jQuery删除数值

Question

我正在使用Bootstrap下拉菜单和jQuery来更改默认的<span class="selected">All</span> ，并使用用户选择的下拉列表项。 但是， 我只想显示所选项目的文本 ，而不是与每个项目关联的数字项目计数。

IE：如果我选择：
<a href="#dropdowns">Sample Text A <span class="badge">3</span></a> ，我只希望“示例文本A”代替默认的“全部” “内的文字： <span class="selected">All</span>

 // TOGGLE Dropdown Selection $(document).ready(function(){ $('.dropdown-menu a').click(function(){ $('.selected').text($(this).text()); }); }); 

  <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="dropdown"><br /> <button class="btn-lg btn-default-outline dropdown-toggle" type="button" data-toggle="dropdown"><br /> <span class="selected">All</span> <span class="pull-right fa fa-chevron-down"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-item"> <a href="#dropdowns">All <span class="badge">43</span></a> </li> <li class="dropdown-item"> <a href="#dropdowns">Sample Text A <span class="badge">3</span></a> </li> <li class="dropdown-item"> <a href="#dropdowns">Sample Text B <span class="badge">30</span></a> </li> <li class="dropdown-item"> <a href="#dropdowns">Sample Text C <span class="badge">10</span></a> </li> <li class="dropdown-item"> <a href="#dropdowns">Sample Text D <span class="badge">40</span></a> </li> </ul> </div> 

Answer 1

您可以使用正则表达式和String.prototype.replace（）替换为'' .badge span元素中的文本：

 $('.dropdown a').click(function(){ var $li = $(this); var badgeText = $li.find('.badge').text(); var liText = $li.text().replace(new RegExp(badgeText),''); $('.selected').text(liText); }); 

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="dropdown"> <br /> <button class="btn-lg btn-default-outline dropdown-toggle" type="button" data-toggle="dropdown"><br /> <span class="selected">All</span> <span class="pull-right fa fa-chevron-down"></span> </button> <ul class="view dropdown-menu"> <li class="dropdown-item"> <a href="#dropdowns">All <span class="badge">43</span></a> </li> <li class="dropdown-item"> <a href="#dropdowns">Sample Text A <span class="badge">3</span></a> </li> <li class="dropdown-item"> <a href="#dropdowns">Sample Text B <span class="badge">30</span></a> </li> <li class="dropdown-item"> <a href="#dropdowns">Sample Text C <span class="badge">10</span></a> </li> <li class="dropdown-item"> <a href="#dropdowns">Sample Text D <span class="badge">40</span></a> </li> </ul> </div> 

Answer 2

有几种方法可以实现这一点，最简单的方法是隐藏显示中的数字，例如

 $('.selected').text($(this).text());
 $('.selected').find('.badge').hide();

Answer 3

你可以这样使用，

$(document).ready(function() {
  $('.dropdown-item a').on('click', function() {
    $('.selected').text(($(this).clone().children().remove().end().text()));
  });
});

的jsfiddle