{"id":24501046,"url":"https://github.com/thomasdev-de/jquery-bs-select-2-dropdown","last_synced_at":"2025-12-29T18:51:05.504Z","repository":{"id":65955289,"uuid":"555319722","full_name":"ThomasDev-de/jquery-bs-select-2-dropdown","owner":"ThomasDev-de","description":"Converts a select into a dropdown","archived":false,"fork":false,"pushed_at":"2024-02-19T07:31:12.000Z","size":139,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-21T18:51:26.082Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/ThomasDev-de.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-21T10:52:27.000Z","updated_at":"2024-02-18T21:08:10.000Z","dependencies_parsed_at":"2024-02-19T08:49:10.538Z","dependency_job_id":null,"html_url":"https://github.com/ThomasDev-de/jquery-bs-select-2-dropdown","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-bs-select-2-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-bs-select-2-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-bs-select-2-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-bs-select-2-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThomasDev-de","download_url":"https://codeload.github.com/ThomasDev-de/jquery-bs-select-2-dropdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243697678,"owners_count":20332993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-01-21T22:23:00.276Z","updated_at":"2025-12-29T18:51:05.442Z","avatar_url":"https://github.com/ThomasDev-de.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e [!IMPORTANT]\n\u003e This package has been overhauled and has been revised here https://github.com/ThomasDev-de/bs-select\n\n# jquery-bsSelectDrop\n\nConverts a select into a dropdown\n\n### table of contents\n\n - [Requirements](#requirements)\n - [Installation](#installation)\n - [Usage](#usage)\n - [Options](#options)\n - [Methods](#methods)\n - [Events](#events)\n\n### Requirements\n- bootstrap \u003e=5.0\n- jQuery 3.6\n- \n### Installation\nDownload and include the script at the end of the body tag.\n```html\n\u003cscript src=\"jquery.bsSelectDrop.js\" type=\"text/javascript\"\u003e\n```\n\nor install with **composer** and include the script at the end of the body tag.\n```shell\ncomposer require webcito/bs-select-drop:dev-main\n```\n```html\n\u003cscript src=\"/vendor/webcito/bs-select-drop/dist/jquery.bsSelectDrop.js\" type=\"text/javascript\"\u003e\n```\n### Set global defaults\n\n```js\n// multiple options\n$.bsSelectDrop.setDefaults(options);\n// single option\n$.bsSelectDrop.setDefault(prop, val);\n// get default options\n$.bsSelectDrop.getDefaults();\n```\n\n\n### Usage\nAll selects with the attribute `[data-bs-toggle=\"select\"]` are initialized automatically.\n\n```html\n\u003c!-- Simple selection --\u003e\n\u003cselect name=\"countries\"\u003e\n \u003coption value=\"Germany\"\u003eDeutschland\u003c/option\u003e\n \u003coption value=\"Poland\"\u003ePolen\u003c/option\u003e\n ...\n\u003c/select\u003e\n\n\u003c!-- Or multiselection --\u003e\n\u003cselect name=\"cities\" multiple\u003e\n \u003coption value=\"1\"\u003eBerlin rocks\u003c/option\u003e\n \u003coption value=\"2\"\u003eNew York\u003c/option\u003e\n ...\n\u003c/select\u003e\n\n\u003c!-- Or with option groups --\u003e\n\u003cselect name=\"cities2\" multiple\u003e\n \u003coptgroup label=\"Germany\"\u003e\n \u003coption value=\"1\"\u003eBerlin\u003c/option\u003e\n \u003coption value=\"2\"\u003eMunich\u003c/option\u003e\n \u003c/optgroup\u003e\n \u003coptgroup label=\"USA\"\u003e\n \u003coption value=\"3\"\u003eNew York\u003c/option\u003e\n \u003coption value=\"4\"\u003eSan Francisco\u003c/option\u003e\n \u003c/optgroup\u003e\n \u003coptgroup label=\"Spain\"\u003e\n \u003coption value=\"5\"\u003eBarcelona\u003c/option\u003e\n \u003coption value=\"6\"\u003eMadrid\u003c/option\u003e\n \u003c/optgroup\u003e\n ...\n\u003c/select\u003e\n\n\u003cscript\u003e\n $('select').bsSelectDrop();\n\u003c/script\u003e\n```\n### option[data-attributes]\n\n| data-attribute | example | description |\n|----------------|------------------------------------------------------------------|----------------------------------------------------------------------|\n| data-subtext | `\u003coption data-subtext=\"Germany\" value=\"1\"\u003eBerlin\u003c/option\u003e` | Adds a small additional text section |\n| data-icon | `\u003coption data-icon=\"fa-solid fa-city\" value=\"1\"\u003eBerlin\u003c/option\u003e` | Adds an icon in front of the option. (e.g. a class from FontAwesome) |\n\n\n### Options\n\n| property | type | default | desc |\n|---------------------|---------------|-------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| btnWidth | `string` | `fit-content` | *the css width of the dropdown button* |\n| btnEmptyText | `string` | `Please select..` | *The text at no selection* |\n| btnClass | `string` | `btn btn-outline-secondary` | *The classes assigned to the dropdown button* |\n| dropUp | `bool` | `false` | *shows the menu above* |\n| dropStart | `bool` | `false` | *shows the menu on the left* |\n| dropEnd | `bool` | `false` | *shows the menu on the right* |\n| dropCenter | `bool` | `false` | *shows the menu centered* |\n| dropHeaderClass | `string` | `secondary` | *If option groups are present, the background class of the heading is set here.* |\n| search | `bool` | `true` | *adds a search function to the menu* |\n| darkMenu | `bool` | `false` | *shows the menu in darkstyle* |\n| menuPreHtml | `null/string` | `null` | *shows a text in the menu before the selection* |\n| menuAppendHtml | `null/string` | `null` | *shows the text in the menu after the selection* |\n| showSubtext | `bool` | `true` | *If this option is true, options have the data attribute data-subtext, the subtext will be displayed in the dropdown.* |\n| showActionMenu | `bool` | `true` | *If it is a multiple selection and this option is true, two buttons are displayed above the selection for faster selection.* |\n| showSelectionAsList | `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.* |\n| showSelectedText | `function` | `(selectedItems, totalItems) =\u003e {}` | *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.* |\n| deselectAllText | `string` | `Deselect All` | *If showActionMenu is true, the language of the two buttons can be set here.* |\n| selectAllText | `string` | `Select All` | *If showActionMenu is true, the language of the two buttons can be set here.* |\n| dropDownListHeight | `number` | `300` | *Height of the dropdown list.* |\n| selectIconClass | `string` | `` | *Class used to style the select icon.* |\n| selectIcon | `string` | `` | *Icon used for selection (i.e \u003ci class='fa-solid fa-check'\u003e\u003c/i\u003e )* |\n| debug | `bool` | `false` | *If true then outputs debug messages to the console.* |\n| dropDownItemClass | `string` | `` | *Class used to stype the drop-down item. Add and .active style to override the Bootstrap active styling* |\n| searchPlaceholder | `string` | `Search..` | \"Placeholder for search input box* |\n\n\n### Methods\nMethods are called as follows\n\n```js\n$('select').bsSelectDrop('method', param);\n```\n\n#### show\nOpens the dropdown\n```js\n$('select').bsSelectDrop('show');\n```\n\n#### hide\nCloses the dropdown\n```js\n$('select').bsSelectDrop('hide');\n```\n\n#### val\nChanges the value of the select\n```js\n$('select').bsSelectDrop('val', 1);\n```\n\n#### updateOptions\nChanges the options of the dropdown.\n```js\n$('select').bsSelectDrop('updateOptions', {\n buttonClass: 'btn btn-danger',\n ...\n});\n```\n\n#### refresh\nRebuild the dropdown. This is useful if the options are changed via Javascript.\n```js\n$('select').bsSelectDrop('refresh');\n```\n\n#### destroy\nDeletes the dropdown and restores the original select.\n```js\n$('select').bsSelectDrop('destroy'); \n```\n\n### Events\n\n| event type | Description |\n|-------------------|------------------------------------------------------------------------------------------------------|\n| hide.bs.select | Fires immediately when the hide instance method has been called. |\n| hidden.bs.select | \tFired when the dropdown has finished being hidden from the user and CSS transitions have completed. |\n| show.bs.select | Fires immediately when the show instance method is called. |\n| shown.bs.select | \tFired when the dropdown has been made visible to the user and CSS transitions have completed. |\n| refresh.bs.select | \tFires when the `refresh` method has been invoked. |\n| change.bs.select | \tFires when the method `val` has been called. |\n| update.bs.select | \tFires when the method `updateOptions` was called. |\n| destroy.bs.select | \tFires when the `destroy` method has been activated. |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fjquery-bs-select-2-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasdev-de%2Fjquery-bs-select-2-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fjquery-bs-select-2-dropdown/lists"}