Bootstrap 3 dropdown select

Question

We are trying re-implement our sign-up form with bootstrap  Our sign up form contains a drop-down list which represents a company type  I have searched extensively online but I do not see any example where a form input would be a drop down   Bootstrap gives a ton of examples of drop-downs related to various action but what I need is a drop down input  I have come up with two solutions   First    lt label gt Type of Business lt  label gt   lt select class  form-control  gt       lt option gt small lt  option gt       lt option gt medium lt  option gt       lt option gt large lt  option gt   lt  select gt     There is a problem here  although the box itself is styled correctly the drop-down itself has no styles applied      Second version    lt div class  btn-group  gt       lt button type  button  class  form-control btn btn-default dropdown-toggle  data-toggle  dropdown  gt          Select Business type  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 small lt  a gt  lt  li gt           lt li gt  lt a href     gt medium lt  a gt  lt  li gt           lt li gt  lt a href     gt large lt  a gt  lt  li gt       lt  ul gt   lt  div gt    This one looks nice     but it s a button  When an option is selected  I do not want to perform any action all I want is to change text and bind the selection with a corresponding input field    Both of these approaches seams to be a wrong choice for my action  I refuse to believe that Bootstrap does not contain a simple drop-down single select component bound to an input field   What am I missing   Please help

User · Answer

Ive been looking for an nice select dropdown for some time now and I found a good one. So im just gonna leave it here. Its called bootsrap-select

here's the link. check it out. it has editable dropdowns, combo drop downs and more. And its a breeze to add to your project.

If the link dies just search for bootstrap-select by silviomoreto.github.io. This is better because its a normal select tag

User · Answer

Try this       lt div class  form-group  gt        lt label class  control-label  for  Company  gt Company lt  label gt        lt select id  Company  class  form-control  name  Company  gt            lt option value  small  gt small lt  option gt            lt option value  medium  gt medium lt  option gt            lt option value  large  gt large lt  option gt        lt  select gt     lt  div gt

User · Answer

We just switched our site to bootstrap 3 and we have a bunch of forms   wasn t fun but once you get the hang it s not too bad   Is this what you are looking for  Demo Here   lt div class  form-group  gt     lt label class  control-label col-sm-offset-2 col-sm-2  for  company  gt Company lt  label gt     lt div class  col-sm-6 col-md-4  gt       lt select id  company  class  form-control  gt         lt option gt small lt  option gt         lt option gt medium lt  option gt         lt option gt large lt  option gt       lt  select gt      lt  div gt   lt  div gt

User · Answer

I d like to extend the paulalexandru s answer and put here complete solution that works generally with bootstrap dropdowns and updating main button s content and also the value from selected option   The bootstrap dropdown is defined this way    lt div class  btn-group  role  group  gt     lt button type  button  data-toggle  dropdown  value  1  class  btn btn-default btn-sm dropdown-toggle  gt      Option 1  lt span class  caret  gt  lt  span gt     lt  button gt     lt ul class  dropdown-menu  gt       lt li gt  lt a href     data-value  1  gt Option 1 lt  a gt  lt  li gt       lt li gt  lt a href     data-value  2  gt Option 2 lt  a gt  lt  li gt       lt li gt  lt a href     data-value  3  gt Option 3 lt  a gt  lt  li gt     lt  ul gt   lt  div gt     Additional to standard bootstrap dropdown code  there is data-value attribute for storing the values in every dropdown option  in  lt a gt  element    Now the JS code  I crated function that handle the dropdowns   function dropdownToggle            select the main dropdown button element     var dropdown     this  parent   parent   prev            change the CONTENT of the button based on the content of selected option     dropdown html   this  html       amp nbsp  lt  i gt  lt span class  caret  gt  lt  span gt             change the VALUE of the button based on the data-value property of selected option     dropdown val   this  prop  data-value         And of course we need to add event listener     document  ready function            dropdown-menu a   on  click   dropdownToggle

User · Answer

If you want to achieve this just keep you dropdown button and style it like the select box  The code is here and below    btn       cursor  default      background-color   FFF      border-radius  4px      text-align  left      caret       position  absolute      right  16px      top  16px      btn-default hover   btn-default focus   btn-default active   btn-default active   open  dropdown-toggle btn-default       background-color   FFF          btn-group open  dropdown-toggle       box-shadow  0 1px 1px rgba 0  0  0  0 075  inset  0 0 8px rgba 102  175  233  0 6      btn-group  width  100    dropdown-menu  width  100      To make the button work like a select box  all you need to add is this tiny javascript code       dropdown-menu a   on  click   function                dropdown-toggle   html   this  html       lt span class  caret  gt  lt  span gt              If you have multiple custom dropdowns like this you can use this javascript code       dropdown-menu a   on  click   function              this  parent   parent   prev   html   this  html       lt span class  caret  gt  lt  span gt

User · Answer

I found a better library which transform the normal  lt select gt   lt option gt  to bootsrap button dropdown format   https   developer snapappointments com bootstrap-select

User · Answer

function             fn bootselect   function  options            this each function                  var os   jQuery this  find  option                var parent   this parentElement              var css   jQuery this  attr  class   split  input   join  btn   split  form-control   join                  var vHtml   jQuery this  find  option value      jQuery this  val           html                var html     lt div class  btn-group  role  group  gt       lt button type  button  data-toggle  dropdown  value  1  class  btn btn-default     css     dropdown-toggle  gt                     vHtml     lt span class  caret  gt  lt  span gt       lt  button gt       lt ul class  dropdown-menu  gt                var i   0              while  i  lt  os length                    html      lt li gt  lt a href     data-value      jQuery os i   val        html-attr      jQuery os i   html        gt     jQuery os i   html       lt  a gt  lt  li gt                    i                              html      lt  ul gt       lt  div gt                var that   this              jQuery parent  append html               jQuery parent  find  ul dropdown-menu  gt  li  gt  a   on  click   function                      jQuery parent  find  button btn   html jQuery this  html       lt span class  caret  gt  lt  span gt                     jQuery that  find  option value      jQuery this  attr  data-value           0  selected   true                  jQuery that  trigger  change                                jQuery this  hide                         jQuery      jQuery   bootstrap-select   bootselect

User · Answer

You can also add  active  class to the selected item       dropdown   on   click     dropdown-menu li a   function         var target     this  html          Adds active class to selected item      this  parents   dropdown-menu   find  li   removeClass  active         this  parent  li   addClass  active          Displays selected text on dropdown-toggle button      this  parents   dropdown   find   dropdown-toggle   html target      lt span class  caret  gt  lt  span gt           See the jsfiddle example

User · Answer

The dropdown list appearing like that depends on what your browser is  as it is not possible to style this away for some   It looks like yours is IE9  but would look quite different in Chrome   You could look to use something like this   http   silviomoreto github io bootstrap-select   Which will make your selectboxes more consistent cross browser

[twitter-bootstrap] Bootstrap 3 dropdown select

Examples related to twitter-bootstrap

Examples related to drop-down-menu

Examples related to twitter-bootstrap-3