snapappointments/bootstrap-select

:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.

bootstrap-select

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support.

Demo

You can view a live demo and some examples of how to use the various options here.

Quick start

Bootstrap-select requires jQuery v1.9.1+, Bootstrap’s dropdown.js component, and Bootstrap's CSS. If you're not already using Bootstrap in your project, a precompiled version of the Bootstrap v3.4.1 minimum requirements can be downloaded here. If using bootstrap-select with Bootstrap v4+, you'll also need Popper.js. For all of Bootstrap v4's requirements, see Getting started. A precompiled version of the requirements will be made available in an upcoming release of bootstrap-select.

Several quick start options are available:

• Download the latest release.
• Clone the repo: git clone https://github.com/snapappointments/bootstrap-select.git
• Install with npm: npm install bootstrap-select
• Install with yarn: yarn add bootstrap-select
• Install with Composer: composer require snapappointments/bootstrap-select
• Install with NuGet: Install-Package bootstrap-select
• Install with Bower: bower install bootstrap-select
• Install via CDN (cdnjs, jsDelivr or PageCDN):

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/i18n/defaults-*.min.js"></script>

The CDN is updated after the release is made public, which means that there is a delay between the publishing of a release and its availability on the CDN.

Usage

Bootstrap 4 only works with bootstrap-select v1.13.0+. By default, bootstrap-select automatically detects the version of Bootstrap being used. However, there are some instances where the version detection won't work. See the documentation for more information.

Via selectpicker class

Add the selectpicker class to your select elements to auto-initialize bootstrap-select.

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

Via JavaScript

// To style only selects with the my-select class
$('.my-select').selectpicker();

or

// To style all selects
$('select').selectpicker();

If calling bootstrap-select via JavaScript, you will need to wrap your code in a .ready() block or place it at the bottom of the page (after the last instance of bootstrap-select).

$(function () {
	$('select').selectpicker();
});

Check out the documentation for further information.

Bugs and feature requests

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing. Make sure you're using the latest version of bootstrap-select before submitting an issue.

• Bug reports
• Feature requests

Documentation

Bootstrap-select's documentation, included in this repo in the root directory, is built with MkDocs and hosted at https://developer.snapappointments.com/bootstrap-select. The documentation may also be run locally.

Copyright and license

Copyright (C) 2012-2018 SnapAppointments, LLC

Licensed under the MIT license.

bootstrap-select's Issues

dropdown-menu anchor hrefs causing redirect when selecting option.

I've put a bootstrap-select in a twitter bootstrap modal dialog and when I select the option from the dropdown-menu, I'm redirected out of the modal dialog. The problem is related to using href="#' in the anchors. I've added "data-bypass" to the anchor and this has fixed the issue.

Is this fix something that can be incorporated?

Ignores/Overrides enabled state when used with KnockoutJs

When used with KO JS, and the data-bind="enable: someTrueFalseValue" the drop down seems to be regularly enabled, even when it should be disabled.

By removing class="selectpicker" from the HTML everything works as expected! :( But I don't get the lovely bootstrap select styling.

Sad times.

e.g.
'''
select id="things"
data-bind="options: myThings, optionsText: 'name', optionsValue: 'id', value: 'myId' enable: false"
class="selectpicker"
/select
'''
Doesn't disable.. removing the selectpicker class, it's always disabled.

I know that the README suggests adding a 'disabled' attribute, when it should be disabled, but I can't see how this can be done with Knockout, I've tried attr { 'disabled: whetherMyThingShouldBeDisabled } .. but to no avail as it seems bootstrap select wants disabled or nothing, not disabled = true/false.

Please show examples of options

Could you throw up a list of the available options on the website and on the github page?

Blank options are very small

Hi! Nice plugin!

But I've found a little bug. If you have a select box with a blank option, for example:

<select name="example">
    <option value=""></option>
    <option value="4">Number 4</option>
    <option value="5">Number 5</option>
</select>

You will get something like this

I've fix with this code:

this.$element.find('option').each(function() {
    var optionClass = $(this).attr("class") !== undefined ? $(this).attr("class") : '';
    var text = $(this).text() != '' ? $(this).text() : ' ';
    if ($(this).parent().is('optgroup')) {
        if ($(this).index() == 0) {
            if ($(this)[0].index != 0) {
                _liA.push(
                    '<dt class="optgroup-div">'+$(this).parent().attr('label')+'</dt>'+
                    '<a tabindex="-1" class="opt '+optionClass+'">'+text+'</a>'
                    );
            } else {
                _liA.push(
                    '<dt>'+$(this).parent().attr('label')+'</dt>'+
                    '<a tabindex="-1" class="opt '+optionClass+'">'+text+'</a>'
                    );
            }
        } else {
             _liA.push('<a tabindex="-1" class="opt '+optionClass+'">'+text+'</a>');
        }
    } else {
        _liA.push('<a tabindex="-1" class="'+optionClass+'">'+text+'</a>');
    }
});

Google Chrome, MacOS X Mountain Lion

size and data-size not always working

I Think that the size option stopped working for element's that have not been attached to the DOM.

For what I've seen without knowing the full code the issue could be in line 31

var liHeight = parseInt(menuA.css('line-height')) + menuA.outerHeight(); //NaN

.css('line-height') is "".

At least on Chrome v23.0.1271.101:

$('').css('line-height')

I've patched by the moment with a default value like this:

var liHeight = parseInt(menuA.css('line-height'),10)||25 + menuA.outerHeight();

I know it's not the perfect solution....but not sure how to fix it.

Bootstrap 2.3.0

Just did some quick tests with 2.3.0 and noticed the lost of the format for the options. Checking the new .css file it seems like Bootstrap changed the selector from ".dropdown-menu li > a" to ".dropdown-menu > li > a", this selector doesn't work because there's a

element between .dropdown-menu and
• . I already opened an issue here in Github in the Bootstrap repo.

  If you want to have the old behavior just add the following lines to your bootstrap-select.css:

  .bootstrap-select.btn-group .dropdown-menu li > a {
      display: block;
      padding: 3px 20px;
      clear: both;
      font-weight: normal;
      line-height: 20px;
      color: #333333;
      white-space: nowrap;
  }
  .bootstrap-select.btn-group .dropdown-menu li > a:hover, .bootstrap-select.btn-group .dropdown-menu li > a:focus {
      text-decoration: none;
      color: #ffffff;
      background-color: #0081c2;
      background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
      background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
      background-image: -o-linear-gradient(top, #0088cc, #0077b3);
      background-image: linear-gradient(to bottom, #0088cc, #0077b3);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
  }
  

How to pass options by javascript

Hello,

I faced on question about how to pass an options through javascript like code
$('.selectpicker').selectpicker({
btnStyle: 'btn-info'
});

Please replay

Thank you,
Developer

AngularJS: selectpicker is not shown properly when ng-options attribute is used with ng-repeat

Hi,

The following code is not working properly, please see the attached image:

<ul>
    <li ng-repeat="category in categories">
        <select class="select" ng-model="status" ng-options="obj.Id as obj.Name for obj in statuses"></select>
    </li>
</ul>

Please note that <div/> is not added just below the select control.

Just in case if you need more info: http://stackoverflow.com/questions/15563314/angularjs-bootstrap-select-is-not-shown-properly-when-ng-options-attribute-is-u

Thank you.

Form reset support

When I hit a button with type="reset" the reqular form fields are being reset to their default / initial value. But the bootstrap-select selectbox is not.
Please provide a method to reset the bootstrap select element.
Patrick

License

Hi,

could you please add a license to this library.

I really like what you did here but have some concerns to use this in a project without a correct license.

I would suggest you use the MIT license.

Support for removing <options> from <select> element

When I remove an option element from a select, the bootstrap-select doesn't update. I tried removing the full $('.bootstrap-select') group and re-initializing by calling .selectpicker(), but it won't update and recreate the dropdown.

$("#select_list option[value='New Test List']").remove();

Any suggestions?

Thanks!

Resize menu if close to the edge of the window

Right now, the menu height is set on render and doesn't change after that. You can set the data-size attribute, but it would be better if the height was dynamic so that the menu would never be cut off if the screen size is too small. This isn't an issue with normal selects because they're able to render outside of the window itself. I started working on this and should have it ready tomorrow.

Change event fires when it's not supposed to

With a selectpicker intialized and ready to use:
If one selects the same item as the currently selected one, a change-event is fired.

With a normal : If someone chooses an option, and that option is already selected, no change-event is fired. http://jsfiddle.net/H2JRz/ Technically, there is no change if the currently selected option is selected again. The selectpicker should try to replicate this behavior.

There

Usage section shows two different tags ..

Well done. About to try it out :)
Noticed a couple little things.

---

The "Usage" section has mixed tags ..
I think you want open AND close option tags.
There are currently option tags opening, and select tags closing each option.

Correct --> "Create your ..."
Incorrect --> "Create yours ..."

Small potatoes, i know.

'Selected' option does not respect optgroups

Scenario:

<select class="selectpicker">
<option>I need help with...</option>
<optgroup label="Group 1">
    <option value=3319  >1</option>
    <option value=3325  >2</option>
    <option value=3430  >3</option>
</optgroup>
<optgroup label="Group 2">
    <option value=3431  >4</option>
    <option value=3432  >5</option>
    <option value=3433  >6</option>
    <option value=3434  >7</option>
</optgroup>
<option value=3435  >8</option>
<option value=3436  >9</option>
<option value=3437  >10</option>
<option value=3438  >11</option>
<option value=3439 selected='selected' >12</option>
<option value=3440  >13</option>
<option value=3441  >14</option>
</select>

This will cause item 7 to be displayed instead of the correct 12. Here is why I think it is happening.

The code must be iterating over the select tag to find the index of the selected option. If it sees an optgroup, it does not expand it, but counts it as 1. In the above example, it optgroup is not expanded, the selected item is the 8th item on this list.

When deciding which index to put the selected on after rendering, optgroup is included so the 8th element is chosen, in this case: 7.

changing an option does not trigger the select change event

Hello,

Thanks for the great addon! I noticed that when an option is changed with this plugin, the original select control's change event is not fired. I have added the following line to the bootstrap-select.js in my project to allow this functionality:

        clickListener: function() {
            _this = this;
            this.$newElement.find('li').on('click', function(e) {
                e.preventDefault();

                var rel = $(this).attr('rel');

                $(this).parents('.bootstrap-select').prev('select')
                    .find('option').removeAttr('selected');

                $(this).parents('.bootstrap-select').prev('select')
                    .find('option')[parseInt(rel,10)]
                    .setAttribute('selected', 'selected');

                $(this).parents('.bootstrap-select')
                    .find('.filter-option').html($(this).text());

                // Trigger select 'change'
                $(this).parents('.bootstrap-select').prev('select').trigger('change');
            });

Not sure this is useful for anyone else but thought I would just let you know!

Cheers and thanks again.

No support for disabling options from javascript

Currently there is no way to dynamically disable option from js.

There's no support for disabled options

"selected" attribute on option items

It's possible that I'm missing something, but I wasn't able to make the select-element obtain the correct form value after selection.
I had to change the source code slightly:

if (_this.$element.not(':disabled')) {
  $select.prev('select').find('option').removeAttr('selected');
  $select.prev('select').find('option').eq(selected).attr('selected', 'selected');
  $select.prev('select').find('option').eq(selected).prop('selected', true);

Make it work with inline width style, please.

for example:

select class="selectpicker" style="width:100px"

or

select class="selectpicker" style="width:50%"

Add GA to the new sample page

@caseyjhol

Please add the GA to your

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-35848102-1']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
</script>

Thanks

Auto width

Is there a chance to make the select has an auto width when option is selected?

Select width (from .css) = 100px
Option selected has 140px long, then
Select width = 140px

Can you make it auto width when select an option?

Multiple bootstrap-selects, each with a label, causes bad focus when clicking label

Using the following example and clicking on the first label causes the second select button to have focus set. Problem is related to line 39 of bootstrap-select.js.

    <label for="page-select">Page</label>
    <select id="page-select" class="selectpicker">
      <option>1</option>
      <option>2</option>
    </select>

    <label for="type-select">Types</label>
    <select id="type-select" class="selectpicker">
      <option>Type 1</option>
      <option>Type 2</option>
    </select>

Touchscreen / mobile issue: Dropdown auto-closes

I decided to give the plugin a try on Android, however the dropdown auto-closes as soon as I let go of the button that first opens the dropdown. Touching it once makes the button flicker a bit, then closes the dropdown automatically.

I'll try to provide a patch for this as soon as I figure out the reason why this happens in the first place.

Tested on Android 4.2.1, on the native browser.
This doesn't happen on Firefox Mobile though.
This doesn't happen on the iPhone 5 browser either.

Not working in IE8

In Internet Explorer 8, I'm getting a 'console' is undefined error in bootstrap-select.js, both on my own site and on the preview site, causing it to break and not render.

If the select options change after initialization, the select options do not change in the selectpicker

If you change the options for the select after the select picker has been initialized, the options in the selectpicker are not changed to match.

Here is a jfiddle to demonstrate the problem: http://jsfiddle.net/ZCmcT/1/

I tried calling $('picker').selectpicker() again but correctly the code ignores a duplicate initialization call.

This could be handled one of two ways:

-- Option 1: put an event handler on the original select in the selectpicker logic to listen for changes to the options and then change the selectpicker accordingly.

-- Option 2: add an option to the selectpicker call to allow for updates.

Not sure which is the best option to take. I could take a look at adding option 1.

Cheers,

Chad.

Fail with empty options

The .selectpicker() fails on handling empty selects like <select></select>.

SelectBoxIt Contributor

Hey @silviomoreto ,

I'm the project maintainer for SelectBoxIt and I'm looking for additional contributors. I noticed that your project is similar, so I wanted to reach out and ask you if you wanted to become a contributor to SelectBoxIt. If not, that's cool too!

Greg

Update Documentation to include the use of Title tags

Thanks for merging my commit!

I think @caseyjhol should update the demo page to include an example that uses the title tag.
http://caseyjhol.github.com/bootstrap-select/

I'm not sure if it should be part of README.md but I could provide a patch for README.md.

Thanks!
#41 includes code for README.md but the nice Examples page could really use the new functionality.

Not able to move into the select list while typing on the keyboard

It is very helpful when the list is too big (i.e. list of countries):
Ability to move the selection into the correct position in the list while typing on the keyboard. This feature is done by default on the normal select list. thanks

Ability to use input-prepend and input-append

Would be good if the button group that is generated could be appended or prepended to another input field.

Right now if you do:
div class="input-prepend"
select
input

it works hackily. but
div class="input-prepend input-append"
select
input
button

Fails to style the btn-group generate by this plugin onto the input (it gets styled onto the blank select as an append).

(Could be this is out of scope though)

Space between text and dropdown arrow

I noticed that there is not enough space between the text and the arrow. Could you add a little?

The "id" attribute of the select tag should be added to the the anchor tag.

To be able to access the new bootstrap-select btn in CSS, it would be helpful if the id was copied over to the new anchor.

I've have attached the code snippet.

Thanks

var id = this.$element.attr('id');
if (id !== undefined) {
    this.$newElement.find('> a').attr('id', id);
}

Broken with hidden select in a tab

I have a hidden select in a tab. When that select is displayed, the tab div height isn't updated, so that I get a vertical scrollbar and the select is truncated (until you scroll down).

getSize function is undefined in Firefox

The new line added to bootstrap-select.js (line 79):

this.$element.bind('DOMNodeInserted', getSize);

is calling the getSize function, but it is declared within the IF condition on line 57. Issue was witnessed in Firefox on a Mac.

This completely breaks functionality in FF.

Cannot select element via jQuery

I've noticed that the behavior is not standard of a select.
It seems to be impossible to choose an element with a value via jQuery.
I've also noticed that if I use an id for the select element a button with the same id is create

you can try it here http://jsfiddle.net/vandalo/vaMmA/

Disabled is not checked

If select has attribute disabled, it isn't passed to bootstrap-select button.

Selectpicker doesn't work with Angularjs

I'm trying to use the selectpicker with angularjs, but doesn't show properly the use of brackets in the value parameter and the option text.

Did someone else tried to use the selectpicker in angularjs with bootstrap?

Selected option?

Is there a way to get bootstrap-select to respect the selected="selected option? Currently this is ignored and the first option is shown.

Feature Request: Do not show "Please select one of the following..."

Is it possible to NOT show the "Please select one of the following..." item? I usually have that one as the first item, with an empty value, so that jqBootstrapValidation will mark it as invalid if no other value is selected.

However, that item is now shown in both the dropdown AND the first item in the openend div. It should be only in the dropdown.

For usability's sake, I understand that the "empty" item could be reselected if someone doesn't know what to select, but that would be covered by adding a last item "None of the above".

Also, I've needed to add CSS as .control-group.error .dropdown-toggle to be the same as .control-group.error select, is there a way for this to happen automatically? This is also for the validation: in my CSS, I make the outline red if no value is in the select at submit.

Usage docs are incorrect ;)

Tiny fix:

Usage docs should read:
` Mustard Ketchup Barbecue `

Instead of (note closing select tag ;):
` Mustard Ketchup Barbecue `

How to set the selected value

Sorry if I missed the method you've defined. I can't find it from the demo or .js file.
I used
$("#select_num").val(5); and
$("#select_num option[value=5]").attr("selected", "selected").
They don't work, ( because the action should be done to the "li>a") .
I guess that i should trigger the click event to "li>a", but i should focus the "index" value first (because the "li>a" don't have any other attr like 'value'), which need more script to write.

Wait for your better solution. Thank you very much!

Optgroup styles/structure isn't maintained after adding new options

The optgroup's styles seem to disappear after adding a new option to the original Select element.

Upon page load, this is the structure I have:

<div class="dropdown-menu" role="menu">
  <ul>
    <li rel="0">
      <a tabindex="-1" href="#">Test List 1</a>
    </li>
    <li rel="1">
      <a tabindex="-1" href="#">Test List 2</a>
    </li>
    <li rel="2" class="optgroup-div">
      <a tabindex="-1" href="#">My List</a>
    </li>
    <li rel="3">
      <dl>
        <dt>
          Options
        </dt>
        <dd>
          <a class="opt5" tabindex="-1" href="#">Create New List</a>
        </dd>
      </dl>
    </li>
    <li rel="4">
      <a class="opt5" tabindex="-1" href="#">Manage Lists...</a>
    </li>
  </ul>
</div>

I then add a new option with the following code:

$("#select_list option[value='My List']").after("<option value='Test New List' class='local'>Test New List</option>")

The final result is this:

<div class="dropdown-menu" role="menu">
  <ul>
    <li rel="0">
      <a tabindex="-1" href="#">Test List 1</a>
    </li>
    <li rel="1">
      <a tabindex="-1" href="#">Test List 2</a>
    </li>
    <li rel="2">
      <a tabindex="-1" href="#">My List</a>
    </li>
    <li rel="3">
      <a tabindex="-1" href="#">Test New List</a>
    </li>
    <li rel="4">
      <a tabindex="-1" href="#">Create New List</a>
    </li>
    <li rel="5">
      <a tabindex="-1" href="#">Manage Lists...</a>
    </li>
  </ul>
</div>

Any suggestions? Could I be doing something wrong?

Feature Request :Multiselect..

Any chance you could add the option of multi select as well.

Similar to this : https://gist.github.com/jculverwell/3943327

Something along the lines of a .multiselect class, that then would insert a
<span class="pull-right"></span>
to each row

and something like this in the row click handler...

$(this).toggleClass("checked");
$(this).find("span").toggleClass("icon-ok");
return false;

If i get some time ill fork and try it myself :)

m.

Focus doesn't work

Hey man, thank you for great extension

We have an issue with focusing element on TAB and shift-TAB, is there some way to fix this? (Also down arrow doesn't work as in html select) Sorry, works ...

P.S.: Works in chrome, doesn't work in FF (Mac OS)

Incorrect markup on Usage example

At the bottom of the documentation at http://silviomoreto.github.com/bootstrap-select/ the last example reads:

<select class="selectpicker">
    <option>Mustard</select>
    <option>Ketchup</select>
    <option>Relish</select>
</select>

The closing tags of the options are currently </select> when they should read </option> - this might catch a few people out.

Select breaks on nav collapse

Hello again,

I've been working with this control a little and have found that if you put the select in a collapsible nav and you lower the screen resolution to such a width that the nav collapses, the functionality breaks. I'm looking into this myself but thought I'd give you a heads up.

Here's the code to reproduce issue:

<div class="container-fluid">

    <div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a>
            <a class="brand" href="#" id="calendarTitle">Title</a>
            <div class="nav-collapse">
                <ul class="nav">     
                    <li class="dropdown">   
                        <a href="#" class="dropdown-toggle" id="legendTrigger">
                            Legend
                            <b class="caret"></b>
                        </a>                    
                    </li>
                    <li class="divider-vertical" ></li>
                    <li class="navbar-search">
                        Status:
                        <select id="testSelect">
                            <option value="1">Test #1</option>
                            <option value="2">Test #2</option>
                            <option value="3">Test #3</option>
                            <option value="4">Test #4</option>
                            <option value="5">Test #5</option>
                            <option value="6">Test #6</option>
                            <option value="7">Test #7</option>
                            <option value="8">Test #8</option>
                        </select>
                    <li />
                </ul>  
                <ul class="pull-right nav">
                    <li><button id="movePrev" class="btn"><i class="icon-arrow-left"></i></button></li>
                    <li><button id="moveNext" class="btn"><i class="icon-arrow-right"></i></button></li>
                </ul> 
            </div>                              
        </div>
    </div>
</div>

<script type="text/javascript">
    $('#testSelect').selectpicker();
</script>

Bootstrap-select inside bootstrap collapse

When using bootstrap-selects inside collapsing accordion I can't make it stay on top (even outside the accordion page). I tried different things but I couldn't make work... Any ideas what can be done to mimic the functionality of a normal select?

Enhancement: Ability to specify custom width

The span* functionality works well, but I need to specify a custom width.

I found that setting the width style in each of the following elements will give the desired result, but I can't quite figure out how to modify bootstrap-select.js.

.btn-group.bootstrap-select
button.btn.dropdown-toggle.clearfix

Support for a width data attribute like this would be amazing:

<select class="selectpicker" data-width="80px">