How to Display Selected Item in Bootstrap Button Dropdown Title

Question

I am using the bootstrap Dropdown component in my application like this    lt div class  btn-group  gt       lt button class  btn  gt Please Select From List lt  button gt       lt button class  btn dropdown-toggle  data-toggle  dropdown  gt           lt span class  caret  gt  lt  span gt       lt  button gt       lt ul class  dropdown-menu  role  menu  aria-labelledby  dropdownMenu  gt          lt li gt  lt a tabindex  -1  href     gt Item I lt  a gt  lt  li gt          lt li gt  lt a tabindex  -1  href     gt Item II lt  a gt  lt  li gt          lt li gt  lt a tabindex  -1  href     gt Item III lt  a gt  lt  li gt          lt li class  divider  gt  lt  li gt          lt li gt  lt a tabindex  -1  href     gt Other lt  a gt  lt  li gt       lt  ul gt   lt  div gt    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

User · Accepted Answer

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.

User · Answer

you need to use add class open in   lt div class  btn-group open  gt   and in li add class  active

User · Answer

Once you click the item add some data attribute like data-selected-item  true  and get it again   Try adding data-selected-item  true  for li element that you clicked  then        ul dropdown-menu li data-selected-item  a   text      Before adding this attribute you simply remove existing data-selected-item in the list  Hope this would help you  For information about data attribute usage in jQuery  refer jQuery data

User · Answer

I was able to slightly improve Jai s answer to work in the case of you having more than one button dropdown with a pretty good presentation that works with bootstrap 3   Code for The Button   lt div class  btn-group  gt     lt button type  button  class  btn btn-default dropdown-toggle  data-toggle  dropdown  gt      Option   lt span class  selection  gt Option 1 lt  span gt  lt span class  caret  gt  lt  span gt     lt  button gt     lt ul class  dropdown-menu  role  menu  gt       lt li gt  lt a href     gt Option 1 lt  a gt  lt  li gt       lt li gt  lt a href     gt Option 2 lt  a gt  lt  li gt       lt li gt  lt a href     gt Option 3 lt  a gt  lt  li gt     lt  ul gt   lt  div gt    JQuery Snippet      dropdown-menu li a   click function         this  parents   btn-group   find   selection   text   this  text         this  parents   btn-group   find   selection   val   this  text            I also added a 5px margin-right to the  selection  class

User · Answer

I have corrected script for multiple dropdowns on the page    function            dropdown-menu li a   click function            var item     this           var id   item parent   parent   attr  aria-labelledby                   id   first-child   text   this  text                   id   first-child   val   this  text

User · Answer

Updated for Bootstrap 3 3 4   This will allow you to have different display text and data value for each element  It will also persist the caret on selection   JS       dropdown-menu li a   click function        this  parents   dropdown   find   btn   html   this  text        lt span class  caret  gt  lt  span gt         this  parents   dropdown   find   btn   val   this  data  value           HTML    lt div class  dropdown  gt     lt button class  btn btn-default dropdown-toggle  type  button  data-toggle  dropdown  aria-haspopup  true  aria-expanded  true  gt      Dropdown      lt span class  caret  gt  lt  span gt     lt  button gt     lt ul class  dropdown-menu  aria-labelledby  dropdownMenu1  gt       lt li gt  lt a href     data-value  action  gt Action lt  a gt  lt  li gt       lt li gt  lt a href     data-value  another action  gt Another action lt  a gt  lt  li gt       lt li gt  lt a href     data-value  something else here  gt Something else here lt  a gt  lt  li gt       lt li gt  lt a href     data-value  separated link  gt Separated link lt  a gt  lt  li gt     lt  ul gt   lt  div gt    JS Fiddle Example

User · Answer

For example   HTML    lt div class  dropdown  gt     lt button class  btn btn-default dropdown-toggle  type  button  data-toggle  dropdown  gt        lt BtnCaption gt Select item lt  BtnCaption gt        lt span class  caret  gt  lt  span gt        lt  button gt     lt ul class  dropdown-menu  gt        lt li gt  lt a href     gt Option 1 lt  a gt  lt  li gt        lt li gt  lt a href     gt Option 2 lt  a gt  lt  li gt        lt li class  disabled  gt  lt a href     gt Option 3 lt  a gt  lt  li gt        lt  ul gt    lt  div gt    I use new element BtnCaption for changing only button s text   Paste into   document  ready function       the following text  JavaScript           dropdown-menu li not  disabled  a   click function                this  closest   dropdown   find   btn BtnCaption   text   this  text                 not  disabled  don t allow use the disabled menu items

User · Answer

Here is my version of this which I hope can save some of your time      jQuery PART       dropdown-menu   on  click    li a   function      var selText     this  children  h4   html         this  parent  li   siblings   removeClass  active            vl   val   this  attr  data-value         this  parents   btn-group   find   selection   html selText       this  parents  li   addClass  active          HTML PART     lt div class  container  gt     lt div class  btn-group  gt       lt a class  btn btn-default dropdown-toggle btn-blog   data-toggle  dropdown  href     id  dropdownMenu1  style  width 200px   gt  lt span class  selection pull-left  gt Select an option  lt  span gt          lt span class  pull-right glyphiconglyphicon-chevron-down caret  style  float right margin-top 10px   gt  lt  span gt  lt  a gt         lt ul class  dropdown-menu  role  menu  aria-labelledby  dropdownMenu1  gt          lt li gt  lt a href     class    data-value 1 gt  lt p gt  HER Can you write extra text or  lt b gt HTLM lt  b gt  lt  p gt   lt h4 gt   lt span class  glyphicon glyphicon-plane  gt  lt  span gt    lt span gt  Your Option 1 lt  span gt   lt  h4 gt  lt  a gt    lt  li gt          lt li gt  lt a href     class    data-value 2 gt  lt p gt  HER Can you write extra text or  lt i gt HTLM lt  i gt  or some long long long long long long long long long long text  lt  p gt  lt h4 gt   lt span class  glyphicon glyphicon-briefcase  gt  lt  span gt   lt span gt Your Option 2 lt  span gt    lt  h4 gt  lt  a gt         lt  li gt         lt li class  divider  gt  lt  li gt      lt li gt  lt a href     class    data-value 3 gt  lt p gt  HER Can you write extra text or  lt b gt HTLM lt  b gt  or some  lt  p gt  lt h4 gt   lt span class  glyphicon glyphicon-heart text-danger  gt  lt  span gt   lt span gt Your Option 3 lt  span gt    lt  h4 gt  lt  a gt         lt  li gt       lt  ul gt     lt  div gt     lt input type  text  id  vl    gt   lt  div gt

User · Answer

Another simple way  Bootstrap 4  to work with multiple dropdowns          dropdown-item   on  click    function            var btnObj     this  parent   siblings  button              btnObj  text   this  text               btnObj  val   this  text

User · Answer

Further modified based on answer from  Kyle as    text   returns exact string  so the caret tag is printed literally  than as a markup  just in case someone would like to keep the caret intact in dropdown       dropdown-menu li   click function        this  parents   btn-group   find   btn   html      this  text      lt span class   caret   gt  lt  span gt

User · Answer

This one works on more than one dropdown in the same page  Furthermore  I added caret on selected item           dropdown-menu   on  click    li a   function              this  parent   parent   siblings   btn first-child   html   this  text      lt span class  caret  gt  lt  span gt               this  parent   parent   siblings   btn first-child   val   this  text

User · Answer

It seems to be a long issue  All we want is just implement a select tag in the input group  But the bootstrap would not do it  https   github com twbs bootstrap issues 10486   the trick is just adding  btn-group  class to the parent div  html    lt div class  input-group  gt     lt div class  input-group-btn btn-group  gt       lt button type  button  class  btn btn-default dropdown-toggle  data-toggle  dropdown  gt        Product Name  lt span class  caret  gt  lt  span gt       lt  button gt       lt ul class  dropdown-menu  role  menu  gt           lt li gt  lt a href     gt A lt  a gt  lt  li gt           lt li gt  lt a href     gt B lt  a gt  lt  li gt       lt  ul gt     lt  div gt     lt input type  text  class  form-control  gt     lt span class  input-group-btn  gt       lt button class  btn btn-primary  type  button  gt Search lt  button gt     lt  span gt   lt  div gt    js       dropdown-menu li a   click function e       var selText     this  text          this  parents   input-group   find   dropdown-toggle   html selText    lt span class  caret  gt  lt  span gt

User · Answer

I had to put some the displayed javascripts above inside the  document ready  code  Otherwise they didn t work  Probably obvious for many  but not for me  So if you re testing look at that option    lt script type  text javascript  gt    document  ready function      rest of the javascript code here      lt  script gt

User · Answer

This single jQuery function will do all you need      document   ready function             dropdown   each function  key  dropdown            var  dropdown     dropdown            dropdown find   dropdown-menu a   on  click   function                   dropdown find  button   text   this  text    append    lt span class  caret  gt  lt  span gt

[jquery] How to Display Selected Item in Bootstrap Button Dropdown Title

Examples related to jquery

Examples related to twitter-bootstrap