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

Posted 2021-05-05

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

IE：如果我选择： <a href="#dropdowns">Sample Text A <span class="badge">3</span></a>从列表中，我只想要“Sample Text A”代替默认的“All”文本：<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>

答案

您可以使用Regular expressions和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>

另一答案

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

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

另一答案

你可以这样使用，

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

JSFIDDLE

以上是关于从下拉列表中获取所选文本，但使用jQuery删除数值的主要内容，如果未能解决你的问题，请参考以下文章

jQuery Chosen：如何从多项选择中获取所选选项文本的数组

下拉菜单列表单击功能删除活动文本并添加所选文本

使用 jquery 显示基于所选选项的文本框

jQuery从下拉列表中删除一个选项，给定选项的文本/值

在Jquery中获取所选选项的文本值[重复]

从文本框中使用 jquery mobile 填充下拉列表