{"id":34004647,"url":"https://github.com/gianlucagiacometti/bootstrap-select","last_synced_at":"2026-04-08T15:31:46.698Z","repository":{"id":63516999,"uuid":"568155339","full_name":"gianlucagiacometti/bootstrap-select","owner":"gianlucagiacometti","description":"Exstension class for the Bootstrap select element","archived":false,"fork":false,"pushed_at":"2024-10-07T13:20:57.000Z","size":214,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-14T22:18:51.526Z","etag":null,"topics":["bootstrap","hacktoberfest","select"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gianlucagiacometti.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-19T16:15:36.000Z","updated_at":"2024-10-07T13:21:01.000Z","dependencies_parsed_at":"2023-02-01T00:12:21.694Z","dependency_job_id":null,"html_url":"https://github.com/gianlucagiacometti/bootstrap-select","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/gianlucagiacometti/bootstrap-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianlucagiacometti%2Fbootstrap-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianlucagiacometti%2Fbootstrap-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianlucagiacometti%2Fbootstrap-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianlucagiacometti%2Fbootstrap-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gianlucagiacometti","download_url":"https://codeload.github.com/gianlucagiacometti/bootstrap-select/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianlucagiacometti%2Fbootstrap-select/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31562685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","hacktoberfest","select"],"created_at":"2025-12-13T10:11:43.613Z","updated_at":"2026-04-08T15:31:46.691Z","avatar_url":"https://github.com/gianlucagiacometti.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bootstrap-select\n\nExtension class for the Bootstrap (https://getbootstrap.com) Select element\n\nThis program is written in plain JavaScript and is designed for Bootstrap 5.2.x and modern browsers.\n\nThe minimum version of ECMAScript is 2017. I reserve the right to switch to newer versions of ECMAScript at any time without further notice.\n\nAlthough the W3C Recommendations do not mention it for HTML 5, the HTML 4.01 Recommendations (https://www.w3.org/TR/html401/interact/forms.html#h-17.6) 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.\"\nFor this reason, the bsSelect class is already recursive.\n\nThe bsSelect class uses the Input and the Dropdown elements of Bootstrap, for a maximum level of compatibility.\n\nThis program is released under the MIT licence.\n\n\n## Requirements\n\nBootstrap \u003e= 5.2.2\n\nBoostrap Icons \u003e= 1.9 (used only by search and option images)\n\nNOTE: Version numbers will follow the version numbers of Bootstrap releases (i.e. 1.\u003cb\u003e5.2.2\u003c/b\u003e.1 - Bootstrap release version in bold)\n\n\n## Usage\n\nAdd these lines in the html \u0026lt;head\u0026gt; section:\n\n    \u003clink rel=\"stylesheet\" href=\"bootstrap.select.css\"\u003e\n    \u003cscript src=\"bootstrap.select.js\"\u003e\u003c/script\u003e\n\nNOTE: the values of \"href\" and \"src\" attributes must reproduce the folder structure where the two files are located.\n\nThe \"selectInserted\" CSS animation provides an authomatic way to create a new bsSelect class element.\n\nYou may:\n\n1. Add to the \u0026lt;select\u0026gt; element the class \"bootstrap-select\".\n\n        \u003cselect id=\"myselect\" class=\"bootstrap-select\"\u003e...\u003c/select\u003e\n\n2. Add the \"bootstrap-select\" class dynamically via JavaScript when the DOM is already loaded.\n\n        \u003cselect id=\"myselect\"\u003e...\u003c/select\u003e\n\n        document.querySelector(\"#myselect\").classList.add(\"bootstrap-select\")\n\n3. Create a new class element manually via JavaScript without using the \"bootstrap-select\" class (the value of randomIndex must be a 16-digit string).\n\n        \u003cselect id=\"myselect\"\u003e...\u003c/select\u003e\n\n\t    let randomIndex = \"\" + Date.now() + Math.floor(Math.random()*1000)\n\t    let mySelectElement = new bsSelect(\"myselect\", randomIndex, classElementParameters)\n\n\t    # The classElementParameters is an optional object. The default value is {}.\n\n\n## Options\n\n### Optional parameters for the Class element\n\n| Property   | Type | Default   | Accepted values     | Description                                                        |\n|------------|------|-----------|---------------------|--------------------------------------------------------------------|\n| visibility | text | collapsed | collapsed, expanded | Sets the visibility of the dropdown menu at the time of creation.  |\n\n\n### Optional classes for the \u0026lt;select\u0026gt; element\n\n| Class                 | Description                                                                                                                           |\n|-----------------------|---------------------------------------------------------------------------------------------------------------------------------------|\n| form-select-lg        | Styles the \u0026lt;select\u0026gt; element as the Bootstrap \u0026lt;input\u0026gt; element with the class \u003cb\u003eform-control-lg\u003c/b\u003e                        |\n| form-select-sm        | Styles the \u0026lt;select\u0026gt; element as the Bootstrap \u0026lt;input\u0026gt; element with the class \u003cb\u003eform-control-sm\u003c/b\u003e                        |\n| form-select-plaintext | Styles the \u0026lt;select\u0026gt; element as the Bootstrap \u0026lt;input\u0026gt; element with the class \u003cb\u003eform-control-plaintext\u003c/b\u003e                 |\n| label-floating        | Styles the \u0026lt;select\u0026gt; element as the Bootstrap \u0026lt;input\u0026gt; element with a floating label (alternative to \u003cb\u003elabel-outline\u003c/b\u003e.  |\n| label-outline         | New style for Bootstrap \u0026lt;input\u0026gt; elements, which also applies to .bootstrap-select class (alternative to \u003cb\u003elabel-floating\u003c/b\u003e). |\n| searchable            | Makes the \u0026lt;select\u0026gt; element searchable                                                                                           |\n\n\n### Optional properties for \u0026lt;select\u0026gt; element\n\n| Property | Type    | Default | Description                                       |\n|----------|---------|---------|---------------------------------------------------|\n| disabled | boolean | false   | Disables the \u0026lt;select\u0026gt; element.              |\n| multiple | boolean | false   | Creates a multiple choice \u0026lt;select\u0026gt; element. |\n\n\n### Optional attributes for the \u0026lt;select\u0026gt; element\n\n| Attribute             | Type    | Description                                                                                                                                    |\n|-----------------------|---------|------------------------------------------------------------------------------------------------------------------------------------------------|\n| data-bs-search-text   | text    | The \u003cb\u003eplaceholder\u003c/b\u003e text in the search input field. If this attribute is not used, the default \u003cb\u003eplaceholder\u003c/b\u003e text will be: \"Search...\" |\n| data-bs-toggle-button | boolean | A toggle all checkbox shows if this attribute exists and is set to \"true\"                                                                      |\n\n\n### Optional properties for the \u0026lt;option\u0026gt; element\n\n| Property | Type    | Default | Description                                   |\n|----------|---------|---------|-----------------------------------------------|\n| disabled | boolean | false   | Disables the \u0026lt;option\u0026gt; element.          |\n| selected | boolean | false   | Marks the \u0026lt;option\u0026gt; element as selected. |\n\n\n### Optional attributes for the \u0026lt;option\u0026gt; element\n\n| Attribute                         | Type         | Description                                                                                                                                                                                                       |\n|-----------------------------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| data-bs-select-option-icon        | text         | The name of the Bootstrap icon which will be prepended to the text of the \u0026lt;option\u0026gt; element (without \"bi-\").                                                                                                 |\n| data-bs-select-option-icon-class  | text         | The name of the class which will be added to the \u0026lt;i\u0026gt; element of the icon.                                                                                                                                   |\n| data-bs-select-option-image       | text         | The \"src\" attribute of the image which will be inserted at the very right of the text of the \u0026lt;option\u0026gt; element.                                                                                              |\n| data-bs-select-option-image-class | text         | The name of the class which will be added to the \u0026lt;img\u0026gt; element of the \u0026lt;option\u0026gt; image.                                                                                                                 |\n| data-bs-select-option-comment     | text or html | The content of the comment which will be inserted below the text of the \u0026lt;option\u0026gt; element. The comment has a default style. All additional styles must be specified in the html as classes or inline styles. |\n| data-bs-select-option-divider     | text         | If exists and set to \"true\" transforms the \u0026lt;option\u0026gt; element into a \u0026lt;hr\u0026gt; divider element                                                                                                               |\n\n\n## Methods\n\n| Name                                     | Description                                                                                                                                                         | Parameters                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Example |\n|------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|\n| sort(parameters)                         | Sorts the options of the \u0026lt;select\u0026gt; element.                                                                                                                    | mode: \"asc\" / \"desc\" (default: \"asc\")\u003cbr\u003edisabled: \"ignore\" / \"top\" / \"bottom\" / \"include\" (default: \"ignore\")\u003cbr\u003esortDisabled: \"true\" / \"false\" (default: \"true\")\u003cbr\u003eemptyDisabledValue: \"top\" / \"include\" (default: \"top\")\u003cbr\u003eoptionGroups: \"include\" / \"ignore\" (default: \"include\")                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |         |\n|                                          |                                                                                                                                                                     | { mode: \"asc\" } =\u003e Sorts the option texts from A to Z.\u003cbr\u003e{ mode: \"desc\" } =\u003e Sorts the option texts from Z to A.\u003cbr\u003e{ disabled: \"ignore\" } =\u003e Sorts the option texts not including the disabled options.\u003cbr\u003e{ disabled: \"top\" } =\u003e Moves all the disabled options to the top of the list.\u003cbr\u003e{ disabled: \"bottom\" } =\u003e Moves all the disabled options to the bottom of the list.\u003cbr\u003e{ disabled: \"include\" } =\u003e Includes all the disabled options in the sorting.\u003cbr\u003e{ sortDisabled: \"true\" } =\u003e Sorts the disabled options according to the \u003cb\u003emode\u003c/b\u003e parameter (this parameter may be set ONLY if the parameter \u003cb\u003edisabled\u003c/b\u003e is set to \"top\" or \"bottom\").\u003cbr\u003e{ sortDisabled: \"false\" } =\u003e Does not sort the disabled options (this parameter may be set ONLY if the parameter \u003cb\u003edisabled\u003c/b\u003e is set to \"top\" or \"bottom\").\u003cbr\u003e{ emptyDisabledValues: \"top\" } =\u003e Moves all disabled options with empty value (\"\") to the top of the list.\u003cbr\u003e{ emptyDisabledValues: \"include\" } =\u003e Includes all disabled options with empty value (\"\") in the sorting (this value of the parameter may be set ONLY if the parameter \u003cb\u003edisabled\u003c/b\u003e is set to \"include\").\u003cbr\u003e{ optionGroups: \"include\" } =\u003e Includes the option groups in the sorting, according to the parameter \u003cb\u003emode\u003c/b\u003e and to the text of their attribute \u003cem\u003e\u003cb\u003elabel\u003c/b\u003e\u003c/em\u003e.\u003cbr\u003e{ optionGroups: \"ignore\" } =\u003e Keeps the position of the option groups fixed in the list and sorts the groups of options in between separately.  |         |\n| insert(options, parent)                  | Inserts a single \u0026lt;option\u0026gt; element, an array of \u0026lt;option\u0026gt; elements, an empty \u0026lt;optgroup\u0026gt; element or an array of empty \u0026lt;optgroup\u0026gt; elements.     | Acceptable \u003cb\u003eoptions\u003c/b\u003e are both html strings or JavaScript DOM elements and their combinations:\u003cbr\u003e1. '\u0026lt;option value\"myvalue\"\u0026gt;My text\u0026lt;/option\u0026gt;'\u003cbr\u003e2. ['\u0026lt;option value=\"anothervalue\"\u0026gt;Another text\u0026lt;/option\u0026gt;', '\u0026lt;option value=\"\" disabled\u0026gt;Disabled value\u0026lt;/option\u0026gt;']\u003cbr\u003e3. option (where option is an element created by: option = document.createElement(\"option\"); option.value = \"2\"; option.text = \"New option\")\u003cbr\u003e4. [option, otherdomoptionelement]\u003cbr\u003e5. [option, '\u0026lt;optgroup id=\"my-group-id\" label=\"My group\"\u0026gt;\u0026lt;/optgroup\u0026gt;']\u003cbr\u003e\u003cbr\u003eThe optional parameter \u003cb\u003eparent\u003c/b\u003e may be:\u003cbr\u003e\"0\" (default value) =\u003e The options will be inserted as children of the listbox.\u003cbr\u003e\"The attribute id of an \u0026lt;optgroup\u0026gt; element\" =\u003e The options will be inserted as children of that \u0026lt;optgroup\u0026gt;.\u003cbr\u003e\"The random 16-dgit index of an \u0026lt;optgroup\u0026gt; element\" =\u003e The options will be inserted as children of that \u0026lt;optgroup\u0026gt;.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |         |\n| remove(parameters)                       | Remove one or more \u0026lt;option\u0026gt; or \u0026lt;optgroup\u0026gt; elements according to the specified parameters.                                                               | value: \u003cem\u003esingle value\u003c/em\u003e\u003cbr\u003evalue: \u003cem\u003earray of values\u003c/em\u003e\u003cbr\u003eid: \u003cem\u003esingle element id\u003c/em\u003e\u003cbr\u003eid: \u003cem\u003earray of element ids\u003c/em\u003e\u003cbr\u003eindex: \u003cem\u003ea single 16-digit random index of the element\u003c/em\u003e                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |         |\n| value()\u003cbr\u003e\u003cbr\u003evalue(values, parameters) | Gets or sets selected values.                                                                                                                                       | If neither values nor parameters are specified the method gets the selected value of the non-multiple \u0026lt;select\u0026gt; element or the array of values for the multiple \u0026lt;select\u0026gt; element.\u003cbr\u003e\u003cbr\u003eAccepted values are:\u003cbr\u003e1. single value for a non-multiple \u0026lt;select\u0026gt; element (the first element will be taken as the selected value if an array is provided)\u003cbr\u003e2. a single value or an array of values for a multiple \u0026lt;select\u0026gt; element\u003cbr\u003e\u003cbr\u003eAccepted parameters are:\u003cbr\u003e{ swap: \"true\" } (default value) =\u003e The new values will be the only selected options.\u003cbr\u003e{ swap: \"false\" } =\u003e The new values will be added to the existing selected values.\u003cbr\u003e{ disabled: \"false\" } (default value) =\u003e Disabled options will NOT be set as selected if their value is provided.\u003cbr\u003e{ disabled: \"true\" } =\u003e Disabled options will be set selected if their value is provided.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |         |\n| disabled(parameters)                     | Sets the \u0026lt;select\u0026gt; element as disabled or not disabled.                                                                                                        | Accepted parameters are:\u003cbr\u003e\"true\"\u003cbr\u003e\"false\" (default value if the parameter is omitted or is not a boolean)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |         |\n| readonly(parameters)                     | Sets the \u0026lt;select\u0026gt; element as readonly. Its effect is similar to the effect of the method \u003cb\u003edisabled\u003c/b\u003e but the background of element will remain unchanged. | Accepted parameters are:\u003cbr\u003e\"true\"\u003cbr\u003e\"false\" (default value if the parameter is omitted or is not a boolean)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |         |\n\n\n## Further developments\n\n1. Update ARIA roles and attributes\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgianlucagiacometti%2Fbootstrap-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgianlucagiacometti%2Fbootstrap-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgianlucagiacometti%2Fbootstrap-select/lists"}