从引导下拉列表中获取选定的文本答案

【问题标题】：Get selected text from bootstrap dropdown从引导下拉列表中获取选定的文本
【发布时间】：2021-04-14 19:16:22
【问题描述】：

我有一个引导下拉菜单，我想保留所选内容的文本。我已经尝试了这里尝试的大部分方法，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();将下拉列表中的所有内容作为字符串返回，而不仅仅是想要的。如何仅从选定的文本中获取文本。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

您是否尝试过使用实际的 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;

【讨论】：

OP 正在使用引导程序进行样式设置。

【解决方案3】：

将点击事件绑定到li 并使用this 获取所选文本并分配给选项卡按钮文本

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

【讨论】：

【解决方案4】：

这是一个 vanillaJS 方式：

鉴于以下 bootstrap 4 下拉菜单 sn-p：

<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();

将在每次选择时打印所选选项（红色、绿色...）

【讨论】：