{"id":21277934,"url":"https://github.com/b13/b_dropdown","last_synced_at":"2025-07-29T10:08:40.031Z","repository":{"id":26779188,"uuid":"30237350","full_name":"b13/b_dropdown","owner":"b13","description":"Javascrip dropdown menu","archived":false,"fork":false,"pushed_at":"2016-11-17T21:13:05.000Z","size":206,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-07-29T04:33:23.507Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/b13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-03T10:25:31.000Z","updated_at":"2016-11-16T13:02:52.000Z","dependencies_parsed_at":"2022-08-21T08:00:51.541Z","dependency_job_id":null,"html_url":"https://github.com/b13/b_dropdown","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/b13/b_dropdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fb_dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fb_dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fb_dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fb_dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b13","download_url":"https://codeload.github.com/b13/b_dropdown/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fb_dropdown/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267668674,"owners_count":24124966,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-21T10:08:19.530Z","updated_at":"2025-07-29T10:08:40.010Z","avatar_url":"https://github.com/b13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# b_dropdown\nFully stylable javascript select menu.\n\n## Introduction\n\nb_dropdown is a small library that handles all your needs for creating custom drop down selections or menus. In general \nit can handle three different scenarios.\n- HTML structure is provided\n- HTML sctructure is provided as standard select option structure\n- JSON data is provided\n\n\n## Documentation\n\n### Install with bower\n\t\n\tbower install b_dropdown -S\n\t\n\n### Base initialization with AMD\n\n\trequire(['b_dropdown'], function(Dropdown){\n\t\n    \tvar newDropdown = new Dropdown(selectElement, options);\n    \t\n    });\n    \n#### Standard initialization based on a given select\nIn this case b_dropdown expects that there is already a html structure that is similar to the following:\n\t\n##### Example select\n\t\u003cselect id=\"dropdownId\" name=\"selectName\"\u003e\n\t\t\u003coption value=\"1\"\u003eOption 1\u003c/option\u003e\n\t\t\u003coption value=\"2\" disabled\u003eOption 2\u003c/option\u003e\n\t\t\u003coption\u003eOption 3\u003c/option\u003e\n\t\t\u003coption value=\"4\" selected\u003eOption 4\u003c/option\u003e\n\t\t\u003coption value=\"5\"\u003eOption 5\u003c/option\u003e\n\t\u003c/select\u003e\n\t\n##### Example js initialization code\t\n\n\trequire(['jquery','b_dropdown'], function($, Dropdown){\n\t\n    \tvar newDropdown = new Dropdown($('#dropdownId'), { . . . });\n    \t\n    });\n    \n##### Result HTML structure   \n\t\u003cdiv class=\"bJS_dropdown b_dropdown\" data-for=\"dropdownId\"\u003e\n\t\t\u003cbutton class=\"bJS_dropdown-toggle b_dropdown-toggle\"\u003e\n\t\t\tOption 4\n\t\t\u003c/button\u003e\n\t\t\u003cdiv class=\"b_dropdown-menuWrap\"\u003e\n\t\t\t\u003cul\u003e\n\t\t\t\t\u003cli data-value=\"1\"\u003e                                \n\t\t\t\t\tOption 1 \n\t\t\t\t\u003c/li\u003e\n\t\t\t\t\u003cli data-value=\"2\" class=\"b_dropdown-disabled\"\u003e \n\t\t\t\t\tOption 2\n\t\t\t\t\u003c/li\u003e\n\t\t\t\t\u003cli\u003e                                               \n\t\t\t\t\tOption 3 \n\t\t\t\t\u003c/li\u003e\n\t\t\t\t\u003cli data-value=\"4\"\u003e                                \n\t\t\t\t\tOption 4 \n\t\t\t\t\u003c/li\u003e\n\t\t\t\t\u003cli data-value=\"5\"\u003e                                  \n\t\t\t\t\tOption 5\n\t\t\t\t\u003c/li\u003e\n\t\t\t\u003c/ul\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\t\u003cselect id=\"dropdownId\" name=\"selectName\" class=\"b_dropdown-select\"\u003e\n\t\t\u003coption value=\"1\"\u003eOption 1\u003c/option\u003e\n\t\t\u003coption value=\"2\" disabled\u003eOption 2\u003c/option\u003e\n\t\t\u003coption\u003eOption 3\u003c/option\u003e\n\t\t\u003coption value=\"4\" selected\u003eOption 4\u003c/option\u003e\n\t\t\u003coption value=\"5\"\u003eOption 5\u003c/option\u003e\n    \u003c/select\u003e\n    \n\n    \n### Settings\n\nOption | Type | Default | Description\n------ | ---- | ------- | ------------\ndisabled | boolean | false | Set this option to true if the dropdown should be disabled initially\nfirstOptionIsPlaceholder | boolean | false | The first select option will be treated as placeholder.\nselectedOption | number | undefined | Index of the option that should be selected initially.\nstaticHeader | string | undefined | Static text stays in the header, even if an option is selected.\n\n### Event handling\n\nThe handling of change event works basically in the same way as in a normal select. You can either simply \nbind change handlers to the select element itself or use the dropdowns onChange function. The advantage of \nthe change function is, that all event handlers that was bound with this function get unbound if you call\nthe destroy function. Directly bound handlers won't be unbound automatically.\n\n\tvar dropdown = new Dropdown ( ... );\n\t\n\tdropdown.onChange(function(event){\n\t\t//React to the option selection\n\t});\n\n### Object types and functions\n\n#### Dropdown Functions\n\nFunction name | Return value type | Description\n------------- | ----------------- | -----------\ncloseMock() | Dropdown | Closes the mock menu and returns the dropdown object;\ndestroy() | undefined | Unbinds all change events that was bound with the onChange function, restores the state of the select structure and destroys the mock structure and the js object.\ndisable() | Dropdown | Disables the dropdown and returns its js object.\ndisableOption(*: indexElementOrOption) | Option | Disables an option and its mock pendant.\nenable() | Dropdown | Enables the select and its mock pendant. Returns the Dropdown object.\nenableOption(*: indexElementOrOption) | Option | Enables an option and its mock pendant. Returns the enabled Option.\ngetLabelForOption(*: indexElementOrOption) | string/undefined | Returns the label of an option either based on its corresponding index, its HTML element or a jQuery collection that wraps the corresponding HTML element.\ngetOption(*: indexOrElement) | Option/undefined | Returns an option based on its order in the select structure.\ngetOptionByIndex(number: index) | Option/undefined | Returns the searche option based on its index.\ngetSelectedIndex() | number | Returns the index of the selected option.\ngetSelectedLabel() | string | Returns the text that is displayed in the option or an empty string.\ngetSelectedOption() | Option | Returns the selected option.\ngetSelectedValue() | string | Returns the value of the selected option.\ngetValueOfOption(*: indexElementOrOption) | string/undefined | Returns the value of an option either based on its corresponding index, its HTML element or a jQuery collection that wraps the corresponding HTML element.\nisDisabled() | boolean | Returns true if the select is disabled.\nisMockOpen() | boolean | Returns true if the mock menu is open.\noffChange(function: changeHandler) | function/undefined | Unbinds handlers from the change event.\nonChange(function: changeHandler) | function | Binds handlers to the change event.\nopenMock() | Dropdown | Opens the mock menu.\nremoveChangeHandlers() | array (The removed handlers) | Removes all handlers that where bound via the onChange function.\nresetSelection() | Dropdown | Selects the first option, no matter if it is used as placeholder or not.\nselect(*: indexOrElement) | Option/undefined | Selects an option either based on its corresponding index, its HTML element or a jQuery collection that wraps the corresponding HTML element.\nselectOptionByValue(number/string: value) | Option/undefined | Selects the first option that contains the given value or does nothing if no option has this value.\nsetLabelForOption(*: indexOrElement, string: label) | string/undefined | Sets the label for an option either based on its corresponding index, its HTML element or a jQuery collection that wraps the corresponding HTML element. Returns the label if set successfully or otherwise undefined.\nsetValueForOption(*: indexOrElement, string: value) | string/undefined | Sets the label for an option either based on its corresponding index, its HTML element or a jQuery collection that wraps the corresponding HTML element. Returns the value if set successfully or otherwise undefined.\ntoggleMock() | Dropdown | Toggles the open state of the mock menu.\n\n#### Option Attributes\n\nThe following attributes get only updated if the change of them is triggered via a function in this documentation. \nPlease make shure that these values get updated if you change them differently. An manual update can be achieved by \nsetting the refresh attribute in the getters.\n\nAttribute name | Type | Description\n-------------- | ---- | -----------\n$el | jQuery | jQuery collection that contains the options HTML element.\nindex | number | The index of the option.\nlabel | string | The label value of the option.\nvalue | string | Tha value of the option.\n\n\n#### Option Functions\n\nFunction name | Return value type | Description\n------------- | ----------------- | -----------\nget$El() | jQuery | Returns a jQuery collection that contains the element that is represented by this option object.\ngetIndex(boolean: refresh) | number | Returns the index of the option. The value won't be updated automatically if you add or remove options. Please use the refresh option to force an update of the value.\ngetLabel(boolean: refresh) | string | Returns the label of the option. The value will only be updated if the setLabel function was used. In other cases please use the refresh option to force an update of the value.\ngetValue(boolean: refresh) | string | Returns the value of the option. The value will only be updated if the setValue function was used. In other cases please use the refresh option to force an update of the value.\nsetLabel(string: label) | string | Sets the text that will be displayed as option and returns it.\nsetValue(string: value) | string | Sets the value of the option and returns it.\nisDisabled(refresh) | boolean | Returns true if the option is disabled. The value will only be updated if the functions of the Option or the Dropdown are used to enable or disable the option. In other cases use the refresh attribute to force an update of the value.\nisSelected() | boolean | Return true if the option is selected. Otherwise false.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13%2Fb_dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb13%2Fb_dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13%2Fb_dropdown/lists"}