195

I am using the bootstrap Dropdown component in my application like this:

<div class="btn-group">
    <button class="btn">Please Select From List</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
       <li><a tabindex="-1" href="#">Item I</a></li>
       <li><a tabindex="-1" href="#">Item II</a></li>
       <li><a tabindex="-1" href="#">Item III</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1" href="#">Other</a></li>
    </ul>
</div>

I would like to display the selected item as the btn label. In other words, replace "Please Select From List" with the list item that has been selected("Item I", "Item II", "Item III").

kaklon
  • 2,422
  • 2
  • 26
  • 39
Suffii
  • 5,694
  • 15
  • 55
  • 92

17 Answers17

178

As far as i understood your issue is that you want to change the text of the button with the clicking linked text, if so you can try this one: http://jsbin.com/owuyix/4/edit

 $(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

As per your comment:

this doesn't work for me when I have lists item <li> populated through ajax call.

so you have to delegate the event to the closest static parent with .on() jQuery method:

 $(function(){

    $(".dropdown-menu").on('click', 'li a', function(){
      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
   });

});

Here event is delegated to static parent $(".dropdown-menu"), although you can delegate the event to the $(document) too because it is always available.

Jai
  • 74,255
  • 12
  • 74
  • 103
  • 1
    Hi Jai I tried ur sample link but it is not working there, besides I need to grab the selected value as well to post to database later – Suffii Nov 18 '12 at 04:57
  • @Behseini Can you please clarify "grab the selected value as well to post to database" which value? – Jai Nov 18 '12 at 05:01
  • i have updated the answer if current clicked item value you want to post in the db. – Jai Nov 18 '12 at 05:03
  • hi Jai sorry for late reply thanks for ur solution.the only problem I have is how I can put it in .ready() function? the solution works perfectly but when I merge it into document.ready() it stops working!Can you also let me know how did you end with the :first-child?! isn't' btn class a button ? so how we use the first child with it? I also will appreciate if you let me know how I capture the selected value in a variable to submit into database? Thanks again for your help – Suffii Nov 18 '12 at 09:52
  • 2
    Hi Behseini, this "$(function(){});" is equivilant to "$(document).ready(function() {});" you can find more information here:http://api.jquery.com/ready/ – Jai Nov 18 '12 at 12:11
  • Hi Jai, thanks for solution.. this doesn't work for me when I have lists item
  • populated through ajax call. But, works fine for static
  • .. any ideas? I can ask another question with more details.
    • – Watt Apr 12 '13 at 19:10
  • @Jai My related quetsion here http://stackoverflow.com/questions/15979359/how-to-get-selected-element-in-bootstrap-dropdown-where-dropdown-is-dynamically – Watt Apr 12 '13 at 19:27
  • This one is causing disappearing of down icon. – Teoman shipahi Jun 12 '15 at 03:34
  • @Teomanshipahi, that's because the code removes the inner span which is used to hold the down icon. This works (note that my code is in an event handler with event object e): `$('.btn:first-child').html($(e.target).text()+' ')` I found this to be helpful: http://www.benknowscode.com/2013/12/bootstrap-dropdown-button-select-box-control.html – Paul Aug 07 '15 at 19:13
  • 2
    Doesn't it seem a little hokey that THIS is the solution? – Christine Jul 04 '16 at 19:34
  • There's no dropdown in this example, though the question clearly states that it should implement a bootstrap dropdown. – steviesh Sep 15 '16 at 22:45
  • For Bootstrap 4 and above, its $(".dropdown-menu .dropdown-item").click(function () – ma11achy Apr 09 '21 at 16:09