PHPackages webcito/bs-select - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. webcito/bs-select ActiveLibrary[Utility & Helpers](/categories/utility) webcito/bs-select ================= A jQuery-based plugin for creating customizable Bootstrap-style select dropdowns with search, multi-select, and more. 2.1.29.1(9mo ago)62641MITJavaScript Since Jun 24Pushed 4mo ago2 watchersCompare [ Source](https://github.com/ThomasDev-de/bs-select)[ Packagist](https://packagist.org/packages/webcito/bs-select)[ Docs](https://github.com/ThomasDev-de/bs-select)[ RSS](/packages/webcito-bs-select/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (3)Versions (42)Used By (0) `$.fn.bsSelect` This jQuery plugin enhances standard `` elements by converting them into fully-featured Bootstrap dropdown components. It provides a wide range of customization options, methods, and event hooks for seamless integration and extended functionality. The plugin is built using **jQuery 3.6**, **Bootstrap 5.3**, and **Bootstrap Icons**, ensuring compatibility and modern design standards. table of contents ----------------- [](#table-of-contents) - [Requirements](#requirements) - [Installation](#installation) - [Usage](#usage) - [Options](#options) - [Methods](#methods) - [Events](#events) Requirements ------------ [](#requirements) - bootstrap 4 or 5 - jQuery Installation ------------ [](#installation) Download and include the script at the end of the body tag. ``` ``` or install with **composer** and include the script at the end of the body tag. ``` composer require webcito/bs-select ``` ``` ``` Set global defaults ------------------- [](#set-global-defaults) ``` // multiple options $.bsSelect.setDefaults(options); // get default options $.bsSelect.getDefaults(); ``` Usage ----- [](#usage) All selects with the attribute `[data-bs-toggle="select"]` or `[data-toggle="select"]` are initialized automatically. ``` Deutschland Polen ... Berlin rocks New York ... Berlin Munich New York San Francisco Barcelona Madrid ... $('select').bsSelect(); ``` option\[data-attributes\] ------------------------- [](#optiondata-attributes) data-attributeexampledescriptiondata-subtext`Berlin`Adds a small additional text sectiondata-icon`Berlin`Adds an icon in front of the option. (e.g. a class from Bootstrap Icons)Options ------- [](#options) propertydata-attributetypedefaultdescvalue\[data-value\]`mixed``undefined`*If a value is passed here, this value (if available) will be preselected during initialization. Otherwise the value of the native select is adopted.The value is only taken into account during the initial initialization (not for 'updateOptions').*search\[data-search\]`bool``true`*adds a search function to the menu*searchText\[data-search-text\]`string``Search..`"Placeholder for search input box\*searchQuery\[data-search-query\]`string``null`*predefined search prefix fixed as `input-group-text` in the search field. The search query becomes `prefix + user input`.*btnWidth\[data-btn-width\]`string``fit-content`*the css width of the dropdown button*btnEmptyText\[data-btn-empty-text\]`string``Please select..`*The text at no selection*btnSplit\[data-btn-split\]`string``false`*create a split button dropdown* [bootstrap Split button](https://getbootstrap.com/docs/5.3/components/dropdowns/#split-button)btnClass\[data-btn-class\]`string``btn-outline-secondary`*The classes assigned to the dropdown button*dropDirection\[data-drop-direction\]`null|string``null`*opens the DropDown in a desired direction. Possible directions are:* `dropup|dropend|dropstart|dropdown-center|dropup-center` see [bootstrap directions](https://getbootstrap.com/docs/5.3/components/dropdowns/#directions)dropIconClass\[data-drop-icon-class\]`null|string``bi bi-chevron-down`*If an icon is set here, the dropdown toggle icon is replaced with it. This only works if btnSplit is false.*menuHeaderClass\[data-menu-header-class\]`string``text-bg-secondary text-uppercase`*If option groups are present, the background class of the heading is set here.*menuInnerClass\[data-menu-inner-class\]`null|string``null`*Set classes for the content of the dropdown menu.*menuItemClass\[data-menu-item-class\]`string``null`*The classes are added to the element `.dropdown-item`.*menuMaxHeight\[data-menu-max-height\]`number``300`*maximum Height of the dropdown list before it starts scrolling.*menuPreHtml\[data-menu-pre-html\]`null|string``null`*shows a text in the menu before the selection*menuAppendHtml\[data-menu-append-html\]`null|string``null`*shows the text in the menu after the selection*showSubtext\[data-show-subtext\]`bool``true`*If this option is true, options have the data attribute data-subtext, the subtext will be displayed in the dropdown.*showActionMenu\[data-show-action-menu\]`bool``true`*If it is a multiple selection and this option is true, two buttons are displayed above the selection for faster selection.*showMultipleCheckboxes\[data-show-action-menu\]`bool``false`*If this option is true, a checkbox is displayed in front of each option instead of the check icon.*actionMenuBtnClass\[data-action-menu-btn-class\]`string``btn-light`*The classnames for the buttons in the action menu.*showSelectionAsList\[data-show-selection-as-list\]`bool``true`*If it is a multiple selection, all selections should be listed below each other. If the value is false, it will show how much was selected.*showSelectedText`function``(selectedItems, totalItems) => {}`*If it is a multiple selection and the selected elements are greater than 1, this function is called. This function is ignored if the showSelectionAsList option is true.*formatSelectedText`function``(title, subtext) => {}`*If it is a multiple selection and the selected elements are greater than 1, this function is called. This function is ignored if the showSelectionAsList option is true.*formatItem`function``($option, title, subtext) => {}`*With this function, all dropdown item can be formated.*deselectAllText\[data-deselect-all-text\]`string``Deselect All`*If showActionMenu is true, the language of the two buttons can be set here.*selectAllText\[data-select-all-text\]`string``Select All`*If showActionMenu is true, the language of the two buttons can be set here.*checkedIcon\[data-checked-icon\]`string``bi bi-check-lg`*Class used to style the select icon.*onBeforeChange`null|function``($select) => { return true; }`*This function is called before the values are changed. If the function returns true, the change is made, otherwise nothing is changed.*onKeyDown`null|function``($select, keyEvent) => { // }`*Called when the pressed key is not a dropdown command (arrowUp,arrowDown,ESCAPE)*Methods ------- [](#methods) Methods are called as follows ``` $('select').bsSelect('method', param); ``` methodexampledescription`'show'``$('select').bsSelect('show');`Opens the dropdown`'hide'``$('select').bsSelect('hide');`Closes the dropdown`'val'``$('select').bsSelect('val', 1);`Changes the value of the select`'search'``$('select').bsSelect('search', 'query');`Programmatically filters the dropdown list. If a `searchQuery` prefix is set, it will be prepended to the query.`'selectAll'``$('select').bsSelect('selectAll');`Selects all values`'selectFirst'``$('select').bsSelect('selectFirst');`Selects the first option element`'selectLast'``$('select').bsSelect('selectLast');`Selects the last option element`'selectNone'``$('select').bsSelect('selectNone');`deselects all values`'clear'``$('select').bsSelect('clear');`Empties the Select`'updateOptions'``$('select').bsSelect('updateOptions', {buttonClass: 'btn btn-danger',...});`Changes the settings of the dropdown.`'setBtnClass'``$('select').bsSelect('setBtnClass', 'btn btn-danger');`Behaves like `updateOptions`. The btnClass option is overwritten.`'refresh'``$('select').bsSelect('refresh');`Rebuild the dropdown. This is useful if the options are changed via Javascript.`'getSelectedText'``$('select').bsSelect('getSelectedText', (text, value) => {});`Retrieves the text based on the selections of the select`'destroy'``$('select').bsSelect('destroy'[, true]);`Deletes the dropdown and restores the original select. If parameter is passed true, all data is removed from the element.`'toggleDisabled'``$('select').bsSelect('toggleDisabled');`Toggles the status of the dropdown button`'setDisabled'``$('select').bsSelect('setDisabled', true);`Set the dropdown disabled (true) otherwise enabled (false)`'toggleVisibility'``$('select').bsSelect('toggleVisibility');`Toggles the visibility of the dropdown`'setVisible'``$('select').bsSelect('setVisible', true);`Set the visibility of the dropdown (show: true, hide: false)Events ------ [](#events) event typeDescriptioninit.bs.selectFires when the plugin has been initialised.hide.bs.selectFires immediately when the hide instance method has been called. Returns whether value was changed as parameter 1 of the status.hidden.bs.selectFired when the dropdown has finished being hidden from the user and CSS transitions have completed.show.bs.selectFires immediately when the show instance method is called.shown.bs.selectFired when the dropdown has been made visible to the user and CSS transitions have completed.refresh.bs.selectFires when the `refresh` method has been invoked.change.bs.selectFires when the values in the select have changed. Additional parameters are \[valueBefore, valueAfter\]userChange.bs.selectFires if the user has changed the value manuallyclear.bs.selectFires when the `clear` method has been called.acceptChange.bs.selectIf the function onBeforeChange returns true, this event is fired.cancelChange.bs.selectIf the function onBeforeChange returns false, this event is fired.update.bs.selectFires when the method `updateOptions` or `setBtnClass` was called.destroy.bs.selectFires when the `destroy` method has been activated.selectAll.bs.selectFires when the select all option has been pressed.selectNone.bs.selectFires when the select none option has been pressed.selectFirst.bs.selectFires when the `selectFirst` method has been called. The value of the first element is passed as a parameter.selectLast.bs.selectFires when the `selectLast` method has been called. The value of the last element is passed as a parameter.any.bs.selectFires at every event.keydown.bs.selectFires when the pressed key is not a dropdown command (arrowUp,arrowDown,ESCAPE)toggleDisabled.bs.selectFires when the disable status changes. Returns the new status as a parameter. fn(e, (boolean)status){}Conclusion ---------- [](#conclusion) The **bs-select** plugin is a feature-rich solution for enhancing `` elements to work with Bootstrap styling and interactivity. For further queries or issues, check: - [GitHub Documentation](https://github.com/ThomasDev-de/bs-select) - [Bootstrap Select Examples](https://getbootstrap.com/docs) ### Health Score 39 — LowBetter than 86% of packages Maintenance66 Regular maintenance activity Popularity17 Limited adoption so far Community9 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~10 days Total 41 Last Release 295d ago Major Versions 1.0.2 → 2.0.02024-10-23 ### Community Maintainers ![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81) --- Top Contributors [![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (133 commits)") --- Tags bootstrapbootstrap4bootstrap5dropdownjavascriptjquerynocsspluginselectpluginSettingsjquerybootstrapdropdownselectbs-select ### Embed Badge ![Health badge](/badges/webcito-bs-select/health.svg) ``` [![Health](https://phpackages.com/badges/webcito-bs-select/health.svg)](https://phpackages.com/packages/webcito-bs-select) ``` ### Alternatives [snapappointments/bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support. 9.8k480.4k3](/packages/snapappointments-bootstrap-select)[onokumus/metismenu A jQuery menu plugin 2.0k263.3k5](/packages/onokumus-metismenu)[kartik-v/yii2-widget-depdrop Widget that enables setting up dependent dropdowns with nested dependencies (sub repo split from yii2-widgets) 814.9M18](/packages/kartik-v-yii2-widget-depdrop)[kartik-v/yii2-widget-typeahead Enhanced Yii2 wrapper for the Twitter Typeahead plugin (sub repo split from yii2-widgets). 454.8M9](/packages/kartik-v-yii2-widget-typeahead)[kartik-v/yii2-widget-rating A Yii2 widget for the simple yet powerful bootstrap-star-rating plugin with fractional rating support (sub repo split from yii2-widgets) 444.1M8](/packages/kartik-v-yii2-widget-rating)[kartik-v/yii2-widget-switchinput A Yii2 wrapper widget for the Bootstrap Switch plugin to use checkboxes & radios as toggle switchinputes (sub repo split from yii2-widgets) 384.4M13](/packages/kartik-v-yii2-widget-switchinput) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)