Get selected text from bootstrap dropdown

user_6005292 0
Viewed 13419

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.

twitter-bootstrap html jquery javascript
4 Answers

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

user_112308230
Related