How can I render a list select box dropdown with bootstrap

Question

Is there anything out of the box that bootstrap supports to render a  regular  defacto drop down list select box   That is  where the drop down box is a list of values and if selected populate the contents of the list box   Something similar to this functionality   http   bootstrapformhelpers com select

User · Answer

I m currently fighting with dropdowns and I d like to share my experiences   There are specific situations where  lt select gt  can t be used and must be  emulated  with dropdown   For example if you want to create  bootstrap input groups  like Buttons with dropdowns  see http   getbootstrap com components  input-groups-buttons-dropdowns   Unfortunately  lt select gt  is not supported in input groups  it will not be rendered properly    Or does anybody solved this already  I would be very interested on the solution   And to make it even more complicated  you can t use so simply   this  text   to catch what user selected in dropdown if you re using glypicons or font awesome icons as content for dropdown  For example         lt li id  someId  gt  lt a href   0  gt  lt i class  fa fa-minus  gt  lt  i gt  lt  a gt  lt  li gt  Because in this case there is no text and if you will add some then it will be also displayed in dropdown element and this is unwanted   I found two possible solutions   1   Use   this  html   to get content of the selected  lt li gt  element and then to examine it  but you will get something like  lt a href   0  gt  lt i class  fa fa-minus  gt  lt  i gt  lt  a gt  so you need to play with this to extract what you need   2  Use   this  text   and hide the text in element in hidden span        lt li id  someId  gt  lt a href   0  gt  lt i class  fa fa-minus  gt  lt span class  hidden  gt text lt  span gt  lt  i gt  lt  a gt  lt  li gt   For me this is simple and elegant solution  you can put any text you need  text will be hidden  and you don t need to do any transformations of    this  html   result like in option 1  to get what you need   I hope it s clear and can help somebody  -

User · Answer

Another way without using the  form-control is this         dropdown-menu li a   click function              this  parents   btn-group   find   btn   html   this  text        lt span class  caret  gt  lt  span gt               this  parents   btn-group   find   btn   val   this  data  value                  x000D   x000D      dropdown-menu li a   click function    x000D      this  parents   btn-group   find   btn   html   this  text        lt span class  caret  gt  lt  span gt     x000D      this  parents   btn-group   find   btn   val   this  data  value     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt link href  http   netdna bootstrapcdn com bootstrap 3 0 0 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  http   netdna bootstrapcdn com bootstrap 3 0 0 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   lt div class  btn-group  gt  x000D     lt button  type  button  class  btn btn-info dropdown-toggle  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt  x000D                    Test  lt span class  caret  gt   lt  span gt  x000D     lt  button gt  x000D     lt ul class  dropdown-menu  gt  x000D       lt li gt  lt a href     gt test 1 lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt test 2 lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt test 3 lt  a gt  lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Another option is to make the Bootstrap dropdown behave like a select using jQuery         dropdown-menu li a   click function      var selText     this  text        this  parents   btn-group   find   dropdown-toggle   html selText    lt span class  caret  gt  lt  span gt           http   www bootply com b4NKREUPkN

User · Answer

Ben s code requires the parent div to have the form-group class  I was using btn-group   this is a slightly different version which just searches for the closest div and may even be a bit faster       dropdown-menu li a   click function        var selText     this  text          this  closest  div   find  button data-toggle  dropdown     html selText      lt span class  caret  gt  lt  span gt

User · Answer

Another option could be using bootstrap select  On their own words      A custom select   multiselect for Bootstrap using button dropdown  designed to behave like regular Bootstrap selects

User · Answer

Test  http   jsfiddle net brynner hkwhaqsj 6   HTML   lt div class  input-group-btn select  id  select1  gt       lt button type  button  class  btn btn-default dropdown-toggle  data-toggle  dropdown  aria-expanded  false  gt  lt span class  selected  gt One lt  span gt   lt span class  caret  gt  lt  span gt  lt  button gt       lt ul class  dropdown-menu option  role  menu  gt           lt li id  1  gt  lt a href     gt One lt  a gt  lt  li gt           lt li id  2  gt  lt a href     gt Two lt  a gt  lt  li gt       lt  ul gt   lt  div gt    jQuery     body   on  click    option li  function        var i     this  parents   select   attr  id        var v     this  children   text        var o     this  attr  id              i    selected   attr  id  o             i    selected   text v         CSS   select button  width 100   text-align left    select  caret  position absolute  right 10px  margin-top 10px    select last-child gt  btn  border-top-left-radius 5px  border-bottom-left-radius 5px    selected  padding-right 10px    option  width 100

User · Answer

The Bootstrap3  form-control is cool but for those who love or need the drop-down with button and ul option  here is the updated code  I have edited the code by Steve to fix jumping to the hash link and closing the drop-down after selection    Thanks to Steve  Ben and Skelly        dropdown-menu li a   click function          var selText     this  text          this  closest  div   find  button data-toggle  dropdown     html selText      lt span class  caret  gt  lt  span gt           this  closest   dropdown   removeClass  open        return false

User · Answer

Skelly s nice and easy answer is now outdated with the changes to the dropdown syntax in Bootstap  Instead use this       dropdown-menu li a   click function      var selText     this  text        this  parents   form-group   find  button data-toggle  dropdown     html selText    lt span class  caret  gt  lt  span gt

User · Answer

Bootstrap 3 uses the  form-control class to style form components     lt select class  form-control  gt       lt option value  one  gt One lt  option gt       lt option value  two  gt Two lt  option gt       lt option value  three  gt Three lt  option gt       lt option value  four  gt Four lt  option gt       lt option value  five  gt Five lt  option gt   lt  select gt    http   getbootstrap com css  forms-controls

[twitter-bootstrap] How can I render a list select box (dropdown) with bootstrap?

Examples related to twitter-bootstrap