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:

<label>Type of Business</label> <select class="form-control">     <option>small</option>     <option>medium</option>     <option>large</option> </select>  

There is a problem here: although the box itself is styled correctly the drop-down itself has no styles applied.

Second version:

<div class="btn-group">     <button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">         Select Business type <span class="caret"></span>     </button>     <ul class="dropdown-menu" role="menu">         <li><a href="#">small</a></li>         <li><a href="#">medium</a></li>         <li><a href="#">large</a></li>     </ul> </div> 

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.

Answer 1

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

<div class="form-group">   <label class="control-label col-sm-offset-2 col-sm-2" for="company">Company</label>   <div class="col-sm-6 col-md-4">     <select id="company" class="form-control">       <option>small</option>       <option>medium</option>       <option>large</option>     </select>    </div> </div> 

Answer 2

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() + '<span class="caret"></span>');     }) 

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() + '<span class="caret"></span>');     })