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()处理程序附加到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;

Answer 4

这是一个 vanillaJS 方法：

鉴于以下引导程序 4 下拉片段：

<div class="dropdown-menu" id="select-color-dropdown" aria-labelledby="select-color">
                            <a class="dropdown-item" href="#">Red</a>
                            <a class="dropdown-item" href="#">Orange</a>
                            <a class="dropdown-item" href="#">Green</a>
                            <a class="dropdown-item" href="#">Gray</a>
                        </div>

可以编写一个事件监听器：

/* find web elements */
const colorSelectors = document.querySelector("#select-color-dropdown");

/* define event listeners */
const loadEventListeners = () => {

    colorSelectors.addEventListener("click", (e) => {
        e.preventDefault();
        console.log(e.target.innerText);
    });
}

/* Load all event listeners */
loadEventListeners();

这将在每个选择（红色，绿色...）上打印选定的选项

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

4 个答案: