从引导下拉菜单中获取选定的文本

Question

我有一个引导下拉菜单，我想保留所选内容的文本。我尝试了大多数尝试在这里的方式，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”）作为解释文本（）。以字符串形式返回下拉菜单中的所有内容，而不仅仅是一个想要的内容。如何从所选的文本中获取文本。

Answer 1

您需要的click()处理器连接到a元素被触发的ul内。然后，您可以检索该元素的text()并将其设置为相关按钮。试试这个：

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

Working example

Answer 2

绑定点击事件li和使用this得到选定的文本，分配给选项卡按钮上的文字

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

Answer 3

您是否尝试过使用一个实际的HTML下拉框，而不是一个无序列表？

<select name="tableMenu" id="tableMenu" class="dropdown-menu"> 
    <option value="Att1">Att1</option> 
    <option value="Att2">Att2</option> 
    <option value="Att3">Att3</option> 
    </select> 

然后，您应该能够使用：

var selText= document.getElementById("tableMenu").value;