PHPackages gianlucagiacometti/bootstrap-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. gianlucagiacometti/bootstrap-select ActiveBootstrap-extension[Utility & Helpers](/categories/utility) gianlucagiacometti/bootstrap-select =================================== Extension for the Bootstrap select element v5.3.4(1w ago)43611MITJavaScript Since Jan 1Pushed 1w ago1 watchersCompare [ Source](https://github.com/gianlucagiacometti/bootstrap-select)[ Packagist](https://packagist.org/packages/gianlucagiacometti/bootstrap-select)[ Docs](https://github.com/gianlucagiacometti/bootstrap-select/)[ RSS](/packages/gianlucagiacometti-bootstrap-select/feed)WikiDiscussions main Synced yesterday READMEChangelog (1)Dependencies (4)Versions (8)Used By (1) bootstrap-select ================ [](#bootstrap-select) Extension class for the Bootstrap () select element. This program is written in plain JavaScript and is designed for Bootstrap 5.3 and modern browsers. The minimum version of ECMAScript is 2017. I reserve the right to switch to newer versions of ECMAScript at any time without further notice. Although the W3C Recommendations do not mention it for HTML 5, the HTML 4.01 Recommendations () state that: "Note. Implementors are advised that future versions of HTML may extend the grouping mechanism to allow for nested groups (i.e., OPTGROUP elements may nest). This will allow authors to represent a richer hierarchy of choices." For this reason, the bsSelect class is recursive. Nested optgroups are not valid current HTML authoring markup and should not be treated as a supported public feature, but unexpected nested structures are handled defensively. The bsSelect class uses the Input and Dropdown elements of Bootstrap, for a maximum level of compatibility. This program is released under the MIT licence. Requirements ------------ [](#requirements) Bootstrap >= 5.3 Bootstrap Icons ^1 (used only by search and option images) NOTE: Version numbers follow the Bootstrap version they target. For example, version `1.5.3` is release `1` of this library targeting Bootstrap `5.3`. Usage ----- [](#usage) Add these lines in the html <head> section: ``` ``` NOTE: the values of "href" and "src" attributes must reproduce the folder structure where the two files are located. The "selectInserted" CSS animation provides an automatic way to create a new bsSelect class element. You may: 1. Add to the <select> element the class "bootstrap-select". ``` ... ``` 2. Add the "bootstrap-select" class dynamically via JavaScript when the DOM is already loaded. ``` ... document.querySelector("#myselect").classList.add("bootstrap-select") ``` 3. Create a new class element manually via JavaScript without using the "bootstrap-select" class (the value of randomIndex must be a 16-digit string). ``` ... let randomIndex = "" + Date.now() + Math.floor(Math.random() * 1000) let mySelectElement = new bsSelect("myselect", randomIndex, classElementParameters) ``` The classElementParameters argument is optional. The default value is {}. Options ------- [](#options) ### Optional parameters for the Class element [](#optional-parameters-for-the-class-element) PropertyTypeDefaultAccepted valuesDescriptionvisibilitytextcollapsedcollapsed, expandedSets the visibility of the dropdown menu at the time of creation.### Optional classes for the <select> element [](#optional-classes-for-the-select-element) ClassDescriptionform-select-lgStyles the <select> element as the Bootstrap <input> element with the class **form-control-lg**.form-select-smStyles the <select> element as the Bootstrap <input> element with the class **form-control-sm**.form-select-plaintextStyles the <select> element as the Bootstrap <input> element with the class **form-control-plaintext**.label-floatingStyles the <select> element as the Bootstrap <input> element with a floating label (alternative to **label-outline**).label-outlineNew style for Bootstrap <input> elements, which also applies to .bootstrap-select class (alternative to **label-floating**).searchableMakes the <select> element searchable.### Optional properties for the <select> element [](#optional-properties-for-the-select-element) PropertyTypeDefaultDescriptiondisabledbooleanfalseDisables the <select> element.multiplebooleanfalseCreates a multiple choice <select> element.### Optional attributes for the <select> element [](#optional-attributes-for-the-select-element) AttributeTypeDescriptiondata-bs-search-texttextThe **placeholder** text in the search input field. If this attribute is not used, the default **placeholder** text will be: "Search..."data-bs-toggle-buttonbooleanA toggle all checkbox shows if this attribute exists and is set to "true".### Optional properties for the <option> element [](#optional-properties-for-the-option-element) PropertyTypeDefaultDescriptiondisabledbooleanfalseDisables the <option> element.selectedbooleanfalseMarks the <option> element as selected.### Optional attributes for the <option> element [](#optional-attributes-for-the-option-element) AttributeTypeDescriptiondata-bs-select-option-icontextThe name of the Bootstrap icon which will be prepended to the text of the <option> element (without "bi-").data-bs-select-option-icon-classtextThe class or classes added to the option icon `` element. If `data-bs-select-option-icon` is not set, the class is used directly, allowing custom icon libraries such as flag-icons.data-bs-select-option-imagetextThe "src" attribute of the image which will be inserted at the very right of the text of the <option> element.data-bs-select-option-image-classtextThe name of the class which will be added to the <img> element of the <option> image.data-bs-select-option-commenttext or htmlThe content of the comment which will be inserted below the text of the <option> element. The comment has a default style. All additional styles must be specified in the html as classes or inline styles.data-bs-select-option-dividertextIf exists and set to "true", transforms the <option> element into a <hr> divider element. Dividers are supported inside optgroups. Root-level dividers are not guaranteed to preserve semantic position after sorting.Methods ------- [](#methods) NameDescriptionParameters / examplessort(parameters)Sorts the options of the <select> element.mode: "asc" / "desc" (default: "asc") disabled: "ignore" / "top" / "bottom" / "include" (default: "ignore") sortDisabled: "true" / "false" (default: "true") emptyDisabledValue: "top" / "include" (default: "top") optionGroups: "include" / "ignore" (default: "include")insert(options, parent)Inserts <option> and <optgroup> elements. Supports single elements, arrays, HTML strings, DOM elements, empty optgroups and populated optgroups. Disabled inserted optgroups disable their children. Divider options inside optgroups render as visual dividers and are not selectable.The optional parameter **parent** may be: "0" (default value) => the options will be inserted as children of the listbox. "The attribute id of an <optgroup> element" => the options will be inserted as children of that <optgroup>. "The random 16-digit index of an <optgroup> element" => the options will be inserted as children of that <optgroup>. Example: `FORM.select['my-multiple-select'].insert('One hundred oneOne hundred two')`remove(parameters)Removes one or more <option> or <optgroup> elements according to the specified parameters.value: single value values: array of values id: single element id ids: array of element ids index: a single 16-digit random index of the element String shorthand is supported: `remove('new-group')` is equivalent to `remove({ id: 'new-group' })`.value() value(values, parameters)Gets or sets selected values.If neither values nor parameters are specified, the method gets the selected value of the non-multiple <select> element or the array of values for the multiple <select> element. Accepted values are: 1. single value for a non-multiple <select> element (the first element will be taken as the selected value if an array is provided) 2. a single value or an array of values for a multiple <select> element Accepted parameters are: { swap: "true" } (default value) => the new values will be the only selected options. { swap: "false" } => the new values will be added to the existing selected values. { disabled: "false" } (default value) => disabled options will NOT be set as selected if their value is provided. { disabled: "true" } => disabled options will be set selected if their value is provided.disabled(parameters)Sets the <select> element as disabled or not disabled.Accepted parameters are: true false (default value if the parameter is omitted or is not a boolean)readonly(parameters)Sets the <select> element as readonly. Its effect is similar to the effect of the method **disabled**, but the background of element will remain unchanged.Accepted parameters are: true false (default value if the parameter is omitted or is not a boolean) ### Health Score 46 — FairBetter than 92% of packages Maintenance98 Actively maintained with recent releases Popularity16 Limited adoption so far Community12 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 99.3% 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 ~254 days Recently: every ~0 days Total 6 Last Release 11d ago Major Versions v1.5.3 → v5.3.12026-06-23 ### Community Maintainers ![](https://www.gravatar.com/avatar/a0b87a5a9028115bee573b19f294fd618c20214889d9e2b6f947242a32a55496?d=identicon)[gianlucagiacometti](/maintainers/gianlucagiacometti) --- Top Contributors [![gianlucagiacometti](https://avatars.githubusercontent.com/u/52405?v=4)](https://github.com/gianlucagiacometti "gianlucagiacometti (133 commits)")[![maglnet](https://avatars.githubusercontent.com/u/4430279?v=4)](https://github.com/maglnet "maglnet (1 commits)") --- Tags bootstraphacktoberfestselectbootstrapselect ### Embed Badge ![Health badge](/badges/gianlucagiacometti-bootstrap-select/health.svg) ``` [![Health](https://phpackages.com/badges/gianlucagiacometti-bootstrap-select/health.svg)](https://phpackages.com/packages/gianlucagiacometti-bootstrap-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.8k501.2k3](/packages/snapappointments-bootstrap-select)[jason-munro/cypht Lightweight Open Source webmail written in PHP and JavaScript 1.6k157.9k](/packages/jason-munro-cypht)[istvan-ujjmeszaros/bootstrap-duallistbox A responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices. 628207.6k2](/packages/istvan-ujjmeszaros-bootstrap-duallistbox)[datatables.net/datatables.net-bs5 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap5\](https://getbootstrap.com/) 2193.4k18](/packages/datatablesnet-datatablesnet-bs5)[datatables.net/datatables.net-bs4 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap4\](https://getbootstrap.com/docs/4.6/getting-started/introduction/) 2925.5k15](/packages/datatablesnet-datatablesnet-bs4)[datatables.net/datatables.net-bs DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap\](https://getbootstrap.com/docs/3.3/) 161.6k14](/packages/datatablesnet-datatablesnet-bs) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)