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

Try this:

<div class="form-group">
     <label class="control-label" for="Company">Company</label>
     <select id="Company" class="form-control" name="Company">
         <option value="small">small</option>
         <option value="medium">medium</option>
         <option value="large">large</option>
     </select> 
 </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>');    
})