{"id":30044449,"url":"https://github.com/webfactory/cascading-select","last_synced_at":"2026-03-03T17:07:56.327Z","repository":{"id":304953591,"uuid":"912978253","full_name":"webfactory/cascading-select","owner":"webfactory","description":"Web Component for interdependent \u003cselect\u003e form elements, where the available options in a dependent selection list are based on the selection in a parent or control list.","archived":false,"fork":false,"pushed_at":"2025-05-13T15:58:25.000Z","size":17,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-16T09:23:10.824Z","etag":null,"topics":["web-component"],"latest_commit_sha":null,"homepage":"","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/webfactory.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-06T19:29:38.000Z","updated_at":"2025-05-23T12:15:59.000Z","dependencies_parsed_at":"2025-07-17T16:04:49.510Z","dependency_job_id":"a74e44b9-74e9-4bf0-9588-80e4818c4350","html_url":"https://github.com/webfactory/cascading-select","commit_stats":null,"previous_names":["webfactory/cascading-select"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webfactory/cascading-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Fcascading-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Fcascading-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Fcascading-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Fcascading-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webfactory","download_url":"https://codeload.github.com/webfactory/cascading-select/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Fcascading-select/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30052287,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T15:26:47.567Z","status":"ssl_error","status_checked_at":"2026-03-03T15:26:17.132Z","response_time":61,"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":["web-component"],"created_at":"2025-08-07T06:02:49.155Z","updated_at":"2026-03-03T17:07:56.298Z","avatar_url":"https://github.com/webfactory.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003ccascading-select\u003e\n\nWeb Component for interdependent `\u003cselect\u003e` form elements, where the available options in a dependent selection list are based on the selection in a parent or control list. This pattern is also known as \"dependent select\" (a subform of the generic \"input-dependent input\") or \"cascading dropdowns\".\n\n## Installation\n\n```\nnpm install @webfactoryde/cascading-select\n```\n\n## Usage\n\nThe `\u003ccascading-select\u003e` Web Component is a lightweight wrapper for standard form markup. If offers complete flexibility in regard to the use of `\u003cfieldset\u003e`, `\u003clegend\u003e`, `\u003clabel\u003e` and other elements or attributes (i. e. `class`) needed for layout and styling, as long as two `\u003cselect\u003e` elements with the necessary (data-) attributes are present.\n\nThe second, dependent `\u003cselect\u003e` should initially be hidden (via a `hidden` attribute). This way, in case there are JavaScript errors, the parent `\u003cselect\u003e` does still offer high-level filtering and only the progressive enhancement of the secondary filter level is missing.\n \n### Steps to implement:\n\n1. The JS file \"cascading-select.js\" must be loaded. Depending on browser support requirements, transpilation for older browsers is recommended.\n2. Two `\u003cselect\u003e` elements must be output within the Web Component.\n3. The parent `\u003cselect\u003e` requires a `data-dependent-id` attribute that contains the `id` of the dependent `\u003cselect\u003e` as its value to link the two fields.\n4. The `\u003coption\u003e`s of the parent `\u003cselect\u003e` that have a sub-selection at the second level require a `data-dependent-options` attribute with a JSON-formatted array of objects, each containing a `label` and `value`. Empty placeholder options must also be listed.\n5. The dependent `\u003cselect\u003e` requires an `id` attribute with matches the value used for `data-dependent-id` on the parent.\n6. The dependent `\u003cselect\u003e` should initially have a `hidden` attribute; this will be removed by the Web Component as needed, but serves as a no-JS fallback in case the Web Component does not initialize correctly.\n\n## Parameters\n\nWeb Components support common HTML attributes but can also receive custom parameters.\n\n| Option               | Type    | Default | Description|\n|-----------------------|---------|---------|-----------|\n| always-show-dependent | boolean | false | Controls initial display of the second (\"dependent\") `\u003cselect\u003e` when no selection is made in the first (\"parent\") or an option without sub-selection possibilities is selected. Default: the second field is hidden. When the parameter is present, it is displayed and marked with `aria-disabled` (assuming it has no meaningful interactivity until a selection is made in the \"parent\", but should still be visible to visually indicate the functional pattern).|\n\n## Example\n\n```\n\u003ccascading-select\u003e\n    \u003cfieldset\u003e\n        \u003clegend\u003eWhere do you want to go bouldering?\u003c/legend\u003e\n        \u003cdiv\u003e\n            \u003clabel for=\"town\"\u003eCity\u003c/label\u003e\n            \u003cselect id=\"town\" name=\"town\" data-dependent-id=\"gym\"\u003e\n                \u003coption value=\"\"\u003ePlease choose a city\u003c/option\u003e\n                \u003coption\n                    value=\"1\"\n                    data-dependent-options='[\n                        { \"value\": \"\", \"label\": \"Please choose a gym\" },\n                        { \"value\": \"d11\", \"label\": \"Boulders Habitat Bonn\" },\n                        { \"value\": \"d12\", \"label\": \"Boulders Habitat Beuel\" }\n                    ]'\n                \u003e\n                    Bonn\n                \u003c/option\u003e\n                \u003coption\n                    value=\"2\"\n                    data-dependent-options='[\n                        { \"value\": \"\", \"label\": \"Please choose a gym\" },\n                        { \"value\": \"d21\", \"label\": \"Boulderplanet\" },\n                        { \"value\": \"d22\", \"label\": \"Stuntwerk Köln\" },\n                        { \"value\": \"d23\", \"label\": \"Kletterfabrik\" },\n                        { \"value\": \"d24\", \"label\": \"K11\" }\n                    ]'\n                \u003e\n                    Köln\n                \u003c/option\u003e\n                \u003coption\n                    value=\"3\"\n                    data-dependent-options='[\n                        { \"value\": \"\", \"label\": \"Please choose a gym\" },\n                        { \"value\": \"d31\", \"label\": \"Monolith\" },\n                        { \"value\": \"d32\", \"label\": \"Boulderfactory\" },\n                        { \"value\": \"d33\", \"label\": \"KletterBar\" }\n                    ]'\n                \u003e\n                    Münster\n                \u003c/option\u003e\n            \u003c/select\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n            \u003clabel for=\"gym\"\u003eGym\u003c/label\u003e\n            \u003cselect id=\"gym\" class=\"form-control\"\u003e\u003c/select\u003e\n        \u003c/div\u003e\n    \u003c/fieldset\u003e\n\u003c/cascading-select\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebfactory%2Fcascading-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebfactory%2Fcascading-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebfactory%2Fcascading-select/lists"}