javascript - 从 bootstrap 下拉列表中获取选定的文本

Question

我有一个 bootstrap 下拉菜单，我想保留所选内容的文本。我已经尝试了这里尝试的大部分方法，Get Value From html drop down menu in jquery , 但从来没有真正给出答案，所以我仍然卡住了。

<div id="tableDiv" class="dropdown">
    <button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Table
        <span class="caret"></span>
    </button>
    <ul id="tableMenu" class="dropdown-menu">
        <li><a href="#">Att1</a></li>
        <li><a href="#">Att2</a></li>
        <li><a href="#">Att3</a></li>
    </ul>
</div>

我有一个如下所示的js函数

$("#tableMenu").click(function(){
  var selText = $("#tableMenu").text();
  document.getElementById("tableButton").innerHTML=selText;
});

但正如上面链接中所解释的那样，$("#tableMenu").text();将下拉列表中的所有内容作为字符串返回，而不仅仅是想要的那个。如何仅从所选文本中获取文本。

Answer 1

您需要将 click() 处理程序附加到被切换的 ul 中的 a 元素。然后您可以检索该元素的 text() 并将其设置为相关按钮。试试这个:

$("#tableMenu a").on('click', function(e) {
  e.preventDefault(); // cancel the link behaviour
  var selText = $(this).text();
  $("#tableButton").text(selText);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableDiv" class="dropdown">
  <button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Table
        <span class="caret"></span>
    </button>
  <ul id="tableMenu" class="dropdown-menu">
    <li><a href="#">Att1</a></li>
    <li><a href="#">Att2</a></li>
    <li><a href="#">Att3</a></li>
  </ul>
</div>