从引导下拉列表中获取所选文本

Question

我有一个bootstrap下拉列表,我想保留所选内容的文本.我尝试了大多数在这里尝试的方法,在jquery中获取Value from html下拉菜单,但是从来没有给出真正的答案,所以我仍然卡住了.

<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()处理程序附加到切换的a元素中ul.然后,您可以检索该text()元素并将其设置为相关按钮.试试这个:

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

工作实例