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

;(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 = '<div class="btn-group" role="group">' + '<button type="button" data-toggle="dropdown" value="1" class="btn btn-default ' + css + ' dropdown-toggle">' +
                vHtml + '<span class="caret"></span>' + '</button>' + '<ul class="dropdown-menu">';
            var i = 0;
            while (i < os.length) {
                html += '<li><a href="#" data-value="' + jQuery(os[i]).val() + '" html-attr="' + jQuery(os[i]).html() + '">' + jQuery(os[i]).html() + '</a></li>';
                i++;
            }
            html += '</ul>' + '</div>';
            var that = this;
            jQuery(parent).append(html);
            jQuery(parent).find('ul.dropdown-menu > li > a').on('click', function () {
                jQuery(parent).find('button.btn').html(jQuery(this).html() + '<span class="caret"></span>');
                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();

Answer 2

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.

Answer 3

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

Answer 4

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:

<div class="btn-group" role="group">
  <button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle">
    Option 1 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#" data-value="1">Option 1</a></li>
    <li><a href="#" data-value="2">Option 2</a></li>
    <li><a href="#" data-value="3">Option 3</a></li>
  </ul>
</div> 

Additional to standard bootstrap dropdown code, there is data-value attribute for storing the values in every dropdown option (in <a> 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() + '&nbsp;</i><span class="caret"></span>');

    // 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);
}

Answer 5

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

See the jsfiddle example

Answer 6

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>