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

Question

I have a bootstrap dropdown, and I want to keep the text of what is selected. I have tried most of the ways tried here, Get Value From html drop down menu in jquery , but there was never really an answer given, so I am still stuck.

<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>

I have a js function that looks as follows

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

but as explained in the above link, $("#tableMenu").text(); returns everything in the dropdown as a string, not just the one wanted. How do I get the text just from the one selected.

Answer 1

You need to attach the click() handler to the a element within the ul that gets toggled. You can then retrieve the text() of that element and set it to the related button. Try this:

 $("#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>

Answer 2

Have you tried using an actual HTML drop down box and not an unordered list?

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

You should then be able to use:

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

Answer 3

Bind the click event to li and using this get the selected text and assign to the tab button text

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

Answer 4

Here's a vanillaJS way:

Given the following bootstrap 4 dropdown snippet:

<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>

One could write an event listener:

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

which would print the selected option on every select (Red, Green...)