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

Overview

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.

Latest release npm NuGet CDNJS jsDelivr
License

bootstrap-select demo

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):
">

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


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


<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>Mustardoption>
  <option>Ketchupoption>
  <option>Barbecueoption>
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.

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.

Comments
  • Support Bootstrap 4

    Support Bootstrap 4

    Bootstrap 4 (currently alpha) has a simplified .dropdown-menu .dropdown-item syntax.

    http://v4-alpha.getbootstrap.com/components/dropdowns/

    There's also no longer a requirement for the markup to be ul + li elements, so the dropdown menu can be simply a div.dropdown-menu container with a.dropdown-item items inside.

    opened by hubgit 77
  • Large lists and virtualization

    Large lists and virtualization

    I'm running into performance issues with lists larger than ~4,000 items. Are there any plans for supporting very large lists? Either through virtualization, like http://bl.ocks.org/jasondavies/3689677. Or forcing a search to narrow down the result so there aren't too many items. I suppose this would also require bootstrap-select to be based off of JSON rather than a works fine:

    The following using bootstrap-select fails:

    this comes up as "nothing selected"

    Does bootstrap-select support Knockout?

    PS the selectpicker works fine as expected without "data-bind" and the knockout code also works fine in the same file.

    Any ideas?

    opened by sgodonnell 51
  • Cannot read property 'options' of undefined

    Cannot read property 'options' of undefined

    GREAT PLUGIN! Thanks for the hard work.

    A javascript error is thrown when combining data-live-search="true" with option groups

    In boostrap-select.js (line 1363):

    if (that.options.liveSearch) $parent = $this.parent().parent();

    Example:

    <select id="sel_assign"
        class="selectpicker"
        data-width="100%"
        data-size="auto"
        data-live-search="true"
        title="Select an Assignee">
        <optgroup label="Crew Members">
        <option value="1">Smith</option>
        </optgroup>
    </select>
    

    Help!

    opened by rmirabelle 33
  • selectpicker('mobile') not working on iOS

    selectpicker('mobile') not working on iOS

    I have an issue using the select picker on mobile, I've been able to catch this issue using chrome's mobile device emulator: https://youtu.be/vNzfvwzgPSM it will show it works okay on desktop view but on mobile view you click it multiple times with it not responding accurately.

    bug 
    opened by sam-thecoder 31
  • Option list is empty for bootstrap 4

    Option list is empty for bootstrap 4

    I did a simple HTML document with bootstrap 4 and the latest bootstrap select. The options list is empty then:

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    
    <link rel="stylesheet" href="dist/css/bootstrap-select.min.css">
    
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="dist/js/bootstrap-select.min.js"></script>
    </head>
    <body>
    
    <form>
        <select class="selectpicker">
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </form>
    
    </body>
    </html>
    

    screen

    opened by Defcon0 29
  • Position issue inside absolute scrolling container

    Position issue inside absolute scrolling container

    I am using select-picker in a page where I have a navbar and a main area which is in position:absolute and overflow-y:auto.

    When I use a select picker with a long list of items, the select is positioned outside my main area, which make it appear as if it was under my navbar.

    See this fiddle: https://jsfiddle.net/up7t3y3q/1/

    Steps to reproduce:

    resize the "run" area in jsfiddle so that there is not enough space for the selects to drop down. Open the first select-picker, it will drop up, but is cropped. Open the second (data-container="body") : it is correctly placed and can go over the navbar. Try to scroll : The picker does not follow Open the third (data-container=".my-container") : incorrectly placed. Its position seems to depend on the scroll.

    What I expect: I'm ok with the first two behaviors, this is by-design. Limiting the height of the dropdown-menu to the height available inside the closest item having an overflow css property could be rather complex.

    The third behavior however seems to be a bug for me, as the .dropdown-menu placement is completely wrong. Would you like me to make a PR?

    opened by jeremyVignelles 27
  • Make maxOption=1 behave like a single select

    Make maxOption=1 behave like a single select

    When multiple is set and maxOption is 1, if an option is already selected, selectpicker currently displays an error message, requiring user to uncheck the current item before switching to the new one.

    This is bad for UX because it requires that users click twice for something that could be achieved in a single click.

    The plugin should recognize maxOption = 1 as a special case and do a switch rather than displaying the error message.

    Original Report

    This is an amazing plugin, but i have not find a way to limit the user to select only 1 option from each group.

    My code:

    <select id="compare" class="selectpicker" data-style="btn-success" title="Compare Settings" data-width="25em" multiple>
        <optgroup class="multiple-options" label="Compare"  data-max-options="1">
            <option class="multi-option" title="Compare Daily" selected>Daily</option>
            <option class="multi-option" title="Compare Weekly">Weekly</option>
            <option class="multi-option" title="Compare Monthly">Monthly</option>
        </optgroup>
        <optgroup class="multiple-options" label="Against"  data-max-options="1">
            <option class="multi-option" title="Against Previous Week" selected>Previous Week</option>
            <option class="multi-option" title="Against Last Year">Last Year</option>
        </optgroup>
    </select>
    

    Is possible to implement the user only be able to select 1 value from first group and another from second group?

    Thanks

    enhancement 
    opened by Exadra37 24
  • Setting data-content muddles up the title for the selected option

    Setting data-content muddles up the title for the selected option

    I've added some HTML in the data-content attribute of the <option>s so it displays a flag next to the list of countries.

    Problem is, when I hover over the selected option, I see a tooltip with the HTML that I entered (and it looks gross). I noticed this happens because the title for the displayed element takes the value of the data-content attribute for some reason. yngxe jpg

    Here's the detailed HTML I'm using:

    <option value='BH' data-content="<img src='
        data:image/png;base64,iVB....'> Bahrain"> Bahrain </option>
    
    opened by yazinsai 22
  • `val()` didn't include  `disabled` + `selected` item

    `val()` didn't include `disabled` + `selected` item

    Version:

    Bootstrap: 3.4.1

    bootstrap-select: 1.13.18

    jQuery: 3.4.1

    Actual:

    Link: https://jsfiddle.net/aok54hzc/

    Mustard is disabled selected, UI shown it selected and disabled,

    But in javascript call $("select").val(), it only return "Ketchup"

    image

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

    Except:

    Either don't select disabled item UI OR return selected item ever it is disabled

    PS: If it's html seletct, it only selected non-disabled item https://jsfiddle.net/w1yen67u/1/ image

    bug 
    opened by bleungAtDisplaydata 0
  • Programmatically toggle options for multiple select to trigger changed.bs.select

    Programmatically toggle options for multiple select to trigger changed.bs.select

    For multiple selection case, it'd be nice to be able to programmatically toggle options so that it triggers changed.bs.select with the flipped/toggled index available to be used with changed.bs.select.

    For example:

    .select.selectpicker('toggle', 'option');
    

    And then:

    .select.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        // clickedIndex is available with the toggle option index
        ...
    }
    

    It seems like toggle currently means toggling the UI, so a different function name might be needed (e.g. switch)

    Or is there a streamlined way to implement this with the existing functionalities?

    opened by urlicht 0
  • Please update characters in accent insensitive search ( liveSearchNormalize )

    Please update characters in accent insensitive search ( liveSearchNormalize )

    I need to type "ges" and get in return "Argeș"; and to type "ita" and get in return "Bistrița-Năsăud". I use Bootstrap-select v1.13.14, for select html tags, with liveSearch=True and liveSearchNormalize=True, that contain special characters like: ăĂîÎâÂșȘțȚ. When I type "au" it returns "Bacău", but when I type "ges" it returns "No results matched". My select contains: "Arad"; "Argeș"; "Bacău"; "Brașov"; "Bistrița-Năsăud". To understand it better, visit the webpage ( http://clasate.cimec.ro/ ), and please go to "Selectaţi după Judeţul Deţinătorului" select.

    Please update characters in accent insensitive search, by adding these also Ș u0218 ș u0219 Ț u021a ț u021b

    github-issue

    Thank you

    bug 
    opened by MCApeGithub 1
  • Cannot clear select options

    Cannot clear select options

    Thanks for a great plugin. I'm trying to clear and repopulate the select. Works in v. 1.13.18 but not in 1.14.0-beta3 These two lines have no effect. $(elemId).empty(); $(elemId).selectpicker('refresh');

    Demo error:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Try clear bootstrap-select</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-wLz3iY/cO4e6vKZ4zRmo4+9XDpMcgKOvv/zEU3OMlRo=" crossorigin="anonymous">
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-+IZRbz1B6ee9mUx/ejmonK+ulIP5A5bLDd6v6NHqXnI=" crossorigin="anonymous"> -->
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" integrity="sha256-wiMI7buOV5UBzdWN4s4kXqE/LZ794hx5oJOOIQlDBaM=" crossorigin="anonymous"> -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" integrity="sha256-cwDJdubMsvIJcAYY5EXUZAuQLxSlELxFYQlxvsxdYs8=" crossorigin="anonymous">
        <script>
    
            function clearSelect(elemId, repopulate) {
    
                $(elemId).empty();
                $(elemId).selectpicker('refresh');
    
                if (repopulate) {
                    var newOptionsHtml = '';
                    newOptionsHtml += '<option value="1">Student 1</option>';
                    newOptionsHtml += '<option value="2">Student 2</option>';
    
                    $(elemId).append(newOptionsHtml)
                    $(elemId).selectpicker('refresh');
                }
            }
        </script>
    </head>
    <body>
        <div class="container mt-3" style="max-width: 800px;">
            <h2>Cannot clear bootstrap-select options</h2>
    
            <div class="mb-3 mt-3">
                <label for="student">Student:</label>
                <select id="student" class="selectpicker">
                    <option value="A">Student A</option>
                    <option value="B">Student B</option>
                </select>
            </div>
    
            <button type="button" class="btn btn-primary" onclick="clearSelect('#student', false)">Clear select</button>
            <button type="button" class="btn btn-primary" onclick="clearSelect('#student', true)">Repopulate select</button>
        </div>
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha256-BRqBN7dYgABqtY9Hd4ynE+1slnEw+roEPFzQ7TRRfcg=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-lSABj6XYH05NydBq+1dvkMu6uiCc/MbLYOFGRkf3iQs=" crossorigin="anonymous"></script>
        <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-GRJrh0oydT1CwS36bBeJK/2TggpaUQC6GzTaTQdZm0k=" crossorigin="anonymous"></script> -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js" integrity="sha256-qo0Cam4XJ0QQ06XnCiCFYBh3GDXU45j3lpUp+em2yBU=" crossorigin="anonymous"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js" integrity="sha256-obLPuLg5xxN2MC2szEaXLaN8tEKYgeCMn+TSPMxqOfE=" crossorigin="anonymous"></script>
    </body>
    </html>
    
    bug 
    opened by kl4u5 1
  • Collapsable headers?

    Collapsable headers?

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

    I have a menu with multiple headers and under each header are a lot of selections, and this makes the menu very long. Is there a way to have the headers be collapsable? So, the headers would start collapsed, and then you could click the header to expand it and make the selections?

    Is there an easy way to do this?

    opened by dropdx 0
  • Bootstrap-select breaks jQuery when used with vite.js

    Bootstrap-select breaks jQuery when used with vite.js

    Environment

    • jQuery 3.6.1
    • Bootstrap 5.2.2
    • Bootstrap-select 1.14.0-beta3

    Summary

    When using bootstrap-select with the vite.js build tool, jquery breaks.

    History

    I am attempting to use bootstrap-select in a Laravel application. The latest version of Laravel (9.x) has been retooled to use vite.js as the build tool, replacing webpack.

    Example

    I have created a sample project that demonstrates the non-working behavior on stackblitz, which can be seen here.

    In the above example, please note there are two files, index.html and index2.html. The later is a static use of jquery/bootstrap/bootstrap-select, which works as expected. The former makes use of the vite build tool, and does not work.

    To express the behavior, use the source tree to navigate to src/js/main.js. Observe that when like 8 (which imports bootstrap-select) is uncommented, the message "jquery is broke" is displayed. However, when commenting line 8 and rerunning the app, jquery works, the $ variable is accessible, and the message is updated accordingly.

    Sadly, I am not as proficient a developer as I wish I was so can only speculate as to the problem, however, my best guess is that bootstrap-select does not export bindings as might be expected.

    bug 
    opened by Ferritt1975 0
Releases(v1.14.0-beta3)
  • v1.14.0-beta3(Apr 20, 2022)

    Bug fixes

    • [#2634] Remove IE hacks in CSS
    • [#2669] Remove deprecated sass division with slash character
    • [#2627] Remove "mobile-device" class on destroy
    • [#2616] Fix line ending in Latvian file
    • [#2600] Fix optgroup
    • [#2367] Support selectedTextFormat of count > 0
    • [#2585] Fixes two TypeError exceptions when up/down arrow pressed
    • Fix Cannot read property 'position' of undefined error
    • Fix Cannot read property 'index' of undefined error
    • Fix several overflow bugs
    • [#2659] [#2671] Fix broken Ajax search
    • [#2593] Fix maxOptions bugs

    i18n

    • [#2625] Add turkmen language
    • [#2621] Update deselectAllText turkish translation

    New features

    • [#2305] Add new CDN: PageCDN
    • Support passing in a boolean more argument as an additional argument to the source.data/source.search callback functions

    New Contributors

    • @rjregenold made their first contribution in https://github.com/snapappointments/bootstrap-select/pull/2585
    • @praisedpk made their first contribution in https://github.com/snapappointments/bootstrap-select/pull/2305
    • @mehmetemrekutluca made their first contribution in https://github.com/snapappointments/bootstrap-select/pull/2621
    • @NicolasCARPi made their first contribution in https://github.com/snapappointments/bootstrap-select/pull/2616
    • @diat01 made their first contribution in https://github.com/snapappointments/bootstrap-select/pull/2625
    • @senchden made their first contribution in https://github.com/snapappointments/bootstrap-select/pull/2669
    • @megumiimai made their first contribution in https://github.com/snapappointments/bootstrap-select/pull/2713

    Full Changelog: https://github.com/snapappointments/bootstrap-select/compare/v1.14.0-beta2...v1.14.0-beta3

    Source code(tar.gz)
    Source code(zip)
  • v1.14.0-beta2(Mar 26, 2021)

  • v1.14.0-beta(Nov 29, 2020)

    To install: npm install bootstrap-select@next.

    The highlight of this release is support for using Ajax/JSON as the data source. This includes a new source option, which supports 3 properties: data, load, and search. All 3 support a function that passes an array of options to the callback argument. Alternatively, an array can be set (probably more useful for data). If source.load is set, it will be called when reaching the bottom of the dropdown menu. If source.search is set, bootstrap-select's internal search functionality will be bypassed, allowing you to perform the search yourself. If performing a search and source.search is set, it will be called again when reaching the bottom of the dropdown menu.

    Example usage:

    $('#test2').selectpicker({
        source: {
            data: function (callback) {
                var array = [
                    {
                        text: 'Tent',
                        icon: 'fa-camera'
                    },
                    {
                        text: 'Flashlight',
                        selected: true
                    },
                    {
                        text: 'Disabled Option',
                        disabled: true
                    },
                    {
                        value: 'divider',
                        divider: true
                    },
                    {
                        text: 'Toilet Paper'
                    }
                ];
    
                callback(array);
            },
            load: function (callback, page) {
                $.ajax('/api/load-more', { data: { page } })
                    .then((response) => callback(response.data))
            },
            search: function (callback, page, searchTerm) {
                $.ajax('/api/search', { data: { page, search: searchTerm } })
                    .then((response) => callback(response.data))
            }
        }
    });
    

    New Features

    • #899: Ajax/JSON data source support
    • #1315: Reset select element when form.reset() is called
    • #1416, #2147: Using title to set the select's placeholder has been deprecated. Use placeholder instead. title will no longer set the placeholder starting in v2.0.0. title and placeholder can still be used together to support a placeholder and a custom title.
    • #1449: Add allowClear option to support deselecting the value for single selects
    • #1893: Add open and close methods
    • #2042: Support assigning a function to liveSearchStyle for custom filtering

    Bug Fixes

    • #2507: Placeholder doesn't work when the first option is disabled

    Breaking Changes

    • #1709: use DOMContentLoaded event listener to auto-init bootstrap-select
    • #2259: Drop IE8 support
    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.14.0-beta.zip(269.33 KB)
  • v1.13.18(Jun 26, 2020)

    Bug Fixes

    • #1342: Bootstrap select doesn't send field data on form submit (set form attribute on select element to fix)
    • #2402: In Internet Explorer, with liveSearchPlaceholder enabled, can't select option while searchBox is focused. Also, selected option doesn't get scrolled to when opening menu
    • #2464: title attribute does not work in 1.13.17 (Safari)
    • #2469: Shift-Tab key not working in 1.13.17
    • #2474: With multiple selects, cannot select options with keyboard after using mouse to select options
    • #2483: Dropdown with unselectable index 0 will not scroll to top on arrow_down with last index selected
    • #2491: remove placeholder/title option when destroying selectpicker

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.18.zip(260.96 KB)
  • v1.13.17(May 7, 2020)

  • v1.13.16(Apr 24, 2020)

    Bug Fixes

    • #2380: Specifying a Title and OptGroups creates a redundant divider
    • #2381: Tick/check mark rendering in Firefox
    • #2391: setStyle fails if newElement.parentNode is a document fragment
    • #2393: liHeight does not consider custom option content when computing li height
    • #2442: Using a class in optgroup results in an error on refresh in chrome
    • #2445: Problem with refresh and selected item
    • #2446: Bootstrap select property '_dataApiKeydownHandler' error

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.16.zip(257.61 KB)
  • v1.13.15(Apr 21, 2020)

  • v1.13.14(Apr 17, 2020)

  • v1.13.13(Apr 16, 2020)

    Bug Fixes

    • #2339: data-size="false" not working
    • #2337: calling deselectAll/selectAll immediately after page load throws error
    • #2320: Dropup becomes a dropdown upon search
    • #2308: Keyboard control over Bootstrap Dropdown components stops working
    • #2272: Class bs-placeholder is no longer set on "default" values in 1.13.10
    • #2352: "Deselect All" doesn't consistently work with virtual scroll

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.13.zip(250.99 KB)
  • v1.13.12(Oct 11, 2019)

    Bug Fixes

    • #2176: allow was-validated class to work on select elements without selectpicker class
    • #2321: CTRL + F5 not working while dropdown is open
    • #2308: Keyboard control over Bootstrap Dropdown components stops working
    • #2275: Bug: Event duplication on refresh
    • #2273: "precompiled bootstrap" link is broken in README

    Improvements

    • #2243: change liveSearch input type from "text" to "search"

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.12.zip(249.36 KB)
  • v1.13.11(Sep 20, 2019)

    Bug Fixes

    • #2263: Selecting non-existent option throws error in v1.13.10
    • #2266: Desired width of dropdown menu breaks after resizing window
    • #2285: bootstrap-select throws javascript error with jquery slim
    • #2289: Multiple ticks in optgroup with data-max-options defined as "1"
    • #2326: In IE11, options aren't visible when moving to bottom via "up" arrow key if select has an optgroup

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.11.zip(249.10 KB)
  • v1.13.10(Apr 19, 2019)

    Bug Fixes

    • #1219: Keyboard navigation not working when searching and virtualScroll is false
    • #2109: elements with .form-control class don't adjust height properly since Bootstrap 4.1.3
    • #2126: showTick option not working as expected
    • #2153: Screen reader doesn't read elements in expanded list (NVDA and JAWS)
    • #2251: A standard select with a selected option doesn't scroll to the selected option if inside an optgroup
    • #2253: hideDisabled and selectedTextFormat: count not working correctly if disabled options are selected
    • #2256: selected option styling is not updated if .selectpicker('val', x) is called while dropdown menu is open
    • #2258: menu size doesn't update when virtualScroll is disabled while the menu is open

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.10.zip(248.30 KB)
  • v1.13.9(Mar 29, 2019)

    Bug Fixes

    • #2022: selected class is not removed properly when virtualScroll is disabled and choosing options at the bottom of the select
    • #2106: setting BootstrapVersion option still shows console warning
    • #2126: setting show-tick class doesn't work
    • #2232: Every 'refresh' appends a new span.check-mark
    • #2233: server-side error: HTMLSelectElement is not defined
    • #2234: position bootstrap-select behind input field
    • #2235: Mobile native menu not accessible
    • #2236: JS errors are thrown when using bootstrap select on js-generated select (after calling destroy())
    • #2239: Setting styleBase and empty style result in exception
    • #2244: val() method fires changed.bs.select, but the select's previousValue is not passed through
    • #2245: some default Bootstrap 4 styles are not being set when using BootstrapVersion
    • #2248: width: fit in IE collapses button with text overflowing

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.9.zip(245.00 KB)
  • v1.13.8(Mar 15, 2019)

  • v1.13.7(Mar 12, 2019)

    Bug Fixes

    • #2046: val() method incorrectly fires a native change event
    • #2109: The height of the select doesn't auto-size with multi-line options
    • #2213: button height wrong if using an older doctype
    • #2220: js folder missing in bower_components/bootstrap-select/dist
    • #2221: style option can no longer include multiple styles
    • #2224: auto width (data-width="auto") not working
    • #2226: Selecting option by typing is not working correctly

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.7.zip(248.24 KB)
  • v1.13.6(Mar 9, 2019)

    Bug Fixes

    • #1321: remove extra files from bower release
    • #1665: performance improvements
    • #1832: use on and trigger event handlers instead of click and change shorthand
    • #2078: Elements in an input group below a selectpicker have a higher z-index, causing them to appear above the opened menu
    • #2150: Live search discards the first typed character
    • #2163: Cannot read property 'top' of undefined (ensure container exists)
    • #2166: Sub options display separately instead of as 1 list
    • #2187: move bulk of logic into a setTimeout for faster page load
    • #2189: Empty select refresh error "Cannot read property 'classList' of undefined"
    • #2198: "Cannot read property '0' of undefined" when dropupAuto is false and the select is at the bottom of the page
    • #2199: Escaped tags parsed as non-escaped in title and data-content
    • #2202: always update menu size after updates to live search
    • #2206: Map file for minified js version does not work correctly
    • #2210: An extra divider is added if an optgroup is the last visible element and there are hidden options after it
    • #2217: The bottom divider of an optgroup disappears when searching and one of the options in the optgroup is hidden

    Security

    • #2199: Fixed an XSS vulnerability with data-content, data-subtext, and title options. Implemented a new HTML sanitizer for data-content.

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.6.zip(246.04 KB)
  • v1.13.5(Dec 12, 2018)

  • v1.13.4(Dec 11, 2018)

    Bug Fixes

    • #1710: When listening for keydown event on .bs-searchbox, ensure it is a child of .bootstrap-select
    • #1943: Option dropdownAlignRight auto doesn't work
    • #2034: Uncaught TypeError: Cannot read property '0' of undefined
    • #2082: button vertical alignment
    • #2105: Dynamically added picker causes resize JS error
    • #2118: Memory leak: getPlacement resize & scroll
    • #2140: data-hidden broken in v1.13.0
    • #2151: This plugins broken when the version of IE below 10

    Documentation

    • #2125: add styleBase option to documentation

    New Features

    • #767, #1876, #2026: Improve/expand liveSearchNormalize
    • #2120, #2121, #2152 - replace JSHint with ESLint (clean up code)
    • #1910: Amharic locale
    • #1926: Latvian locale

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.4.zip(144.64 KB)
  • v1.13.3(Oct 15, 2018)

  • v1.13.2(Aug 27, 2018)

    Bug Fixes

    • #1999: selected styling removed from previous option in a multiselect
    • #2024: Arrow down key doesn't scroll the view to the top when virtualScroll is disabled
    • #2027: data-max-options="1" not removing selected class
    • #2029: LiveSearch and "Select All" selects too many options
    • #2033: Dividers broken on bootstrap 4
    • #2035: Selectbox with live search throwing error when UP/DOWN key is pressed
    • #2038: Select / Deselect All buttons are modifying disabled options
    • #2044: When data-container is set, first click resets scroll position
    • #2045: 'auto' width not working
    • #2047: Optgroup labels are escaped
    • #2058: Menu hight is not properly calculated when using data-size and styling the options' height
    • #2079: Subtext is difficult to read on active options

    New Features

    • #1972: add option to manually specify Bootstrap's version
    • #2036: Add support for Bootstrap dropdown's display property added in v4.1.0

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.2.zip(136.44 KB)
  • v1.13.1(Aug 22, 2018)

  • v1.13.0(Aug 22, 2018)

    Bug Fixes

    • #2060: form control sizing classes not working
    • fix sass variable syntax
    • #2062: popper error when bootstrap-select is in a navbar
    • #1913: &nbsp; causing formatting errors on MacOS
    • #2061: unnecessary caret code with Bootstrap 4
    • #2065: .empty() method is not working
    • #2063: New-lines in options cause formatting issues with title attribute (if multiple options selected)
    • #2064: Purely numeric data-subtext breaks live search
    • #2066: Button padding when using data-width="fit" is incorrect
    • #2067: input group addons not displaying properly
    • #2077: selectAll performance in Edge is abysmal
    • #2074: show-menu-arrow not displaying properly
    • #2068: Bootstrap 4 validation pseudo classes not being applied properly when new options are appended dynamically
    • #2070: popover-title is not popover-header in Bootstrap 4
    • #2075: liveSearch with data-content not working
    • #2072: Button text breaks to the next line when using form-control as styleBase (Bootstrap 4)
    • #2069: Placeholder text is unreadable on darker buttons (btn-primary, btn-success, etc.)
    • #1691: XSS vulnerability in option title

    New Features

    • #1404, #1697: changed.bs.select now passes through previousValue as the third parameter (instead of the previous value of the option, which was redundant). This is the value of the select prior to being changed.
    • update jQuery range to make v1.9.1 the minimum (and exclude version 4)

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.0.zip(232.67 KB)
  • v1.13.0-beta(Aug 22, 2018)

  • v1.13.0-alpha(Jul 29, 2017)

    The highlight of this update is the support of virtualization. The options are generated on-the-fly to dramatically improve loading performance of selects (both large and small). In addition, search performance has also seen a drastic improvement (search is now instant, whereas it might have taken more than a few seconds before for a large select). The markup has been rewritten with performance in mind and paves the way for the ability to add/load options dynamically.

    I'll add the option to disable virtualization prior to the full release of v1.13.0, but for now that's the main thing I want to ensure works properly, so I'm leaving it enabled by default for this first alpha.

    Bug Fixes

    • #1303: val() method doesn't fire changed.bs.select
    • #1383: Croatian locale is not cro_CRO. Renamed to hr_HR
    • #1395: title option position not correct when adding options dynamically
    • #1398: trigger setSize on refresh event
    • #1674: Fix li tags inside option being treated as options
    • #1692: Live Search Box Not Cleared After Selection

    New Features

    • #710: focus on selectpicker triggers focus on actual select, allowing for event listeners
    • #1110: 'active' class is only applied when liveSearch is on
    • #1229: Large lists and virtualization
    • #1687: Improve init performance

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.13.0-alpha.zip(125.47 KB)
  • v1.12.4(Jul 19, 2017)

  • v1.12.3(Jul 6, 2017)

  • v1.12.2(Jan 30, 2017)

  • v1.12.1(Nov 22, 2016)

  • v1.12.0(Nov 19, 2016)

    Bug Fixes

    • #1220: unescape button title
    • #1348: escape HTML for optgroup label
    • #1506: Fix bs-placeholder usage for jQuery>=3.0
    • #1509: inline style Content Security Policy
    • #1477: using liveSearchNormalize and liveSearchStyle="startsWith" simultaneously breaks search
    • #1489 fix selectOnTab with liveSearch enabled which was broken when #1489 was fixed
    • #1533: remove touchstart event listener (issues with FastClick)
    • remove destroyLi function - improve refresh() performance
    • #1531: add Spanish (Spain) translations
    • #1553: don't use replace in normalizeToBase if text is undefined (throws error otherwise)

    New Features

    • #1503: Add windowPadding option (either a number or an array of numbers - [top, right, bottom, left])
    • #1516: Improve liveSearch performance (addresses #1275)
    • #1440: allow HTML in placeholder title for non-multiple selects
    • #1555: Use default with SCSS variables

    Compare this release with the previous one.

    Source code(tar.gz)
    Source code(zip)
    bootstrap-select-1.12.0.zip(106.15 KB)
  • v1.11.2(Sep 10, 2016)

Owner
SnapAppointments
Cloud appointment scheduling and client database solutions
SnapAppointments
Pure JavaScript (VanillaJS) dropdown menu, with multiple select and searching support

JS Select Pure JavaScript (VanillaJS) dropdown menu, with multiple select and searching support How to use To use the select plugins, two main file mu

Luigi Verolla 4 Mar 17, 2022
VanillaSelectBox - A dropdown menu with lots of features that takes a select tag and transforms it into a single or multi-select menu with 1 or 2 levels

vanillaSelectBox v1.0.0 vanillaSelectBox : v1.00 : Adding a package.json file New : Possibility to change the dropdown tree and change the remote sear

philippe MEYER 103 Dec 16, 2022
Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.

jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use

Michael Coughlin 5 Oct 28, 2022
Converts select multiple elements into dropdown menus with checkboxes

jquery-multi-select Converts <select multiple> elements into dropdown menus with a checkbox for each <option>. The original <select> element is hidden

mySociety 22 Dec 8, 2022
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
There can be more than Notion and Miro. Affine is a next-gen knowledge base that brings planning, sorting and creating all together. Privacy first, open-source, customizable and ready to use.

AFFiNE.PRO The Next-Gen Knowledge Base to Replace Notion & Miro. Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Free to

Toeverything 12.1k Jan 9, 2023
Simple and intuitive API Client made into a VSCode extension 😊

REST API Client Simple and intuitive API Client made into a VSCode extension. Visual Studio Marketplace • Repository • Releases Visual Studio Code ext

REST API Client 19 Dec 23, 2022
A Bootstrap plugin to create input spinner elements for number input

bootstrap-input-spinner A Bootstrap / jQuery plugin to create input spinner elements for number input. Demo page with examples Examples with floating-

Stefan Haack 220 Nov 7, 2022
SUID is all a set of utils and components ported from MUI Core and much more.

Solid.js User Interface Design (SUID) A port of Material-UI (MUI) built with Solid.js SUID is all a set of utils and components ported from MUI Core a

null 311 Jan 1, 2023
Incredible resources (with links) to help up-skill yourselves on various fields. Resources like programming, designing, engineering and much more and completely Open Source.

Shiryoku Incredible resources (with links) to help up-skill yourselves on various fields. Resources like programming, designing, engineering and much

Kunal Keshan 22 Dec 15, 2022
NoExGen is a node.js express application generator with modern folder structure, namespace/project mapping and much more! It contains preconfigured Settings and Routing files, ready to be used in any project.

Installation $ npm install -g noexgen Quick Start You can use Node Package Execution to create your node-express application as shown below: Create th

Souvik Sen 7 Oct 8, 2022
Easily open daily notes for today in new tab, and much more!

Obsidian daily notes new tab This plugin adds a command for opening daily notes in a new tab (so that a keyboard shortcut could be used!) and gives ex

Xiao Meng 16 Dec 26, 2022
🟢 Music player app with a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more.

Music-player-app see the project here. 1. Key Features 2. Technologies I've used Key Features: ?? Fully responsive clean UI. ?? Entirely mobile respo

suraj ✨ 3 Nov 16, 2022
Query for CSS brower support data, combined from caniuse and MDN, including version support started and global support percentages.

css-browser-support Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentage

Stephanie Eckles 65 Nov 2, 2022
A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes!

(jQuery) Uniform A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes! Works well with jQuery 1.6+, but we

Audith Softworks 2.2k Jan 2, 2023
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

Javi Aguilar 1.4k Dec 22, 2022
Bootstrap 5 spinner/loading/pending indicator for ,