CODEWITHSUNDEEP
jquery
user1919
user1919

Reputation: 3938

Getting value from BootstrapCSS dropdown menu with Jquery

I have made a dropdown menu with bootstrap CSS, which looks like this:

<div class="dropdown">
 <button id="btn_inputManhole_cost2_Dist" class="btn btn-primary dropdown-toggle hidden" type="button" data-toggle="dropdown"> LC/HC
<span class="caret"></span></button>
    <ul id="ul_inputManhole_cost2_Dist" class="dropdown-menu">
      <li><a href = "javascript:return false;">Low Cost</a></li>
      <li><a href = "javascript:return false;">High Cost</a></li>
    </ul>
</div>

I am trying to get the selected value using Jquery.

I try this:

alert($("#ul_inputManhole_cost3_Dist option:selected").text());

but I get nothing in return. Should I define an id in some other html element than the ul?

Upvotes: 0

Views: 17

Answers (1)

Tim Lewis
Tim Lewis

Reputation: 29288

Since it isn't a <select> element, you can't use option:selected as in your example. You can define a click function of your <ul> children which will alert you to their value when you click it. From there, you can save a variable, change something, do whatever you need to do:

$("#ul_inputManhole_cost2_Dist").on("click", "li", function(e){ 
    alert($(this).text());
});

And a quick visual example:

Bootply

Upvotes: 2

Related Questions