{"id":32262873,"url":"https://github.com/slantz/selectum","last_synced_at":"2026-02-23T14:32:37.639Z","repository":{"id":58226752,"uuid":"50863094","full_name":"slantz/selectum","owner":"slantz","description":"Custom native HTML5 select, using data attributes and vanilla JS events which can update url search params via history API and show subsets of other custom selects.","archived":false,"fork":false,"pushed_at":"2016-02-23T17:21:08.000Z","size":71,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-12-25T17:06:54.903Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/slantz.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}},"created_at":"2016-02-01T19:02:04.000Z","updated_at":"2022-10-07T13:16:04.000Z","dependencies_parsed_at":"2022-09-02T18:01:22.743Z","dependency_job_id":null,"html_url":"https://github.com/slantz/selectum","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/slantz/selectum","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slantz%2Fselectum","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slantz%2Fselectum/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slantz%2Fselectum/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slantz%2Fselectum/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slantz","download_url":"https://codeload.github.com/slantz/selectum/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slantz%2Fselectum/sbom","scorecard":{"id":831015,"data":{"date":"2025-08-11","repo":{"name":"github.com/slantz/selectum","commit":"969407868d4d28e2e6923d448975c1259f538643"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-23T17:48:45.453Z","repository_id":58226752,"created_at":"2025-08-23T17:48:45.454Z","updated_at":"2025-08-23T17:48:45.454Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29745575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: 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":[],"created_at":"2025-10-22T20:43:33.276Z","updated_at":"2026-02-23T14:32:37.633Z","avatar_url":"https://github.com/slantz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Selectum\n\n[![selectum on NPM](https://img.shields.io/npm/v/selectum.svg)](https://www.npmjs.com/package/selectum)\n[![selectum on Bower](https://img.shields.io/bower/v/selectum.svg)](http://bower.io/search/?q=selectum)\n[![npm downloads](https://img.shields.io/npm/dm/selectum.svg)](https://www.npmjs.com/package/selectum)\n\n\u003e Custom native HTML5 select, using data attributes and vanilla JS events which can update url search params via history API and show subsets of other custom selects. Can have reset button to pick any value or reset dependent selects. Has an ability to set default palceholder text. Click can be handled via plugin or set with special data attribute.\n\n\u003e Great for Server or Client side rendering!!!\n\n\u003e This is fully jQuery or other libraries independent plugin, can be fully configured with ```[data-attributes]``` or via JS constructor function.\n\n\u003e It's always annoying and irretating when minified labrary renders it's markup and you have to debug it, if your HTML structure totally differs. One of the main advantages of this plugin is that it doesn't render any precompiled layout, you can attach this plugin to any HTML structure and configure it via data attributes or proper css classes. It acts as a separate module or web component.\n\n### [Demo](https://slantz.github.io/selectum/)\n\n##### It uses:\n1. classList API\n2. History API tomanipualte URL\n3. polyfill for ```Element.prototype.closest```\n4. initEvent (initCustomEvent for IE)\n5. css classes for down and up arrows\n6. on/off callbacks\n7. location.search to selelct initial values\n\n##### Settings:\n- Attributes:\n  - [data-selectum]\n  - [data-selectum-render]\n  - [data-selectum-exist]\n  - [data-selectum-head]\n  - [data-selectum-hiddable]\n  - [data-selectum-clickable]\n  - [data-selectum-current]\n  - [data-selectum-reset]\n  - [data-selectum-list]\n  - [data-selectum-id]\n  - [data-selectum-val]\n  - [data-selectum-picker]\n  - [data-selectum-picked]\n  - [data-selectum-emit]\n  - [data-selectum-emit-reset]\n  - [data-selectum-listen]\n  - [data-selectum-listen-reset]\n  - [data-selectum-placeholder]\n  - [data-selectum-update-url]\n  - [data-selectum-url-fetch]\n  - [data-selectum-temp-head] \\(for custom templates to attach styles to 'Loading...' label\\)\n- JS:\n```javascript\n  new Selectum(el, {\n    picker: true,\n    picked: false,\n    render: false,\n    exist: false,\n    title: 'Vegetables Selector',\n    emit: 'selectCode',\n    emitReset: 'resetAll',\n    listen: 'seelctNumber',\n    listenReset: 'resetCode',\n    defaultText: 'Set code',\n    updateUrl: true,\n    urlFetch: true,\n    hiddable: 'fruit'\n  });\n```\n##### Methods:\n  - on\n  - off\n  - render\n\n##### Events:\n  - before:select\n  - select\n  - reset\n  - reset:picked\n  - before:open\n  - open\n  - init:url\n  - url:update\n\n###### Usage:\n```javascript\nvar select = new Selectum(document.querySelector('[data-selectum]'));\n\nselect.on('before:select', function(oldVal){\n    // triggered when before some option would be selected\n});\n\nselect.on('select', function(selectedVal){\n    // triggered when some option was selected\n});\n\nselect.on('reset', function(selectedVal){\n    // triggered when reset button was clicked\n});\n\nselect.on('reset:picked', function(selectedVal){\n    // triggered when select was reset by the picker one\n});\n\nselect.on('before:open', function(selectedVal){\n    // triggered when select was clicked and not opened yet\n});\n\nselect.on('open', function(selectedVal){\n    // triggered when select was opened after click\n});\n\nselect.on('init:url', function(selectedVal){\n    // triggered when value was set from URL on initiation\n});\n\nselect.on('url:update', function(selectedVal){\n    // triggered if select should update url and after URL was updated with selected value\n});\n\nselect.off('click');\n```\n\n\u003e IE10+\n\n\n### Simple HTML5 Dropdown:\n\u003e This is single select which updates history pushState, configured via data-attributes and has no dependent selects.\n\n```html\n\u003cdiv data-selectum=\"color\" data-selectum-placeholder=\"Pick a color\"\u003e\n    \u003cdiv class=\"plugin\"\u003e\n        \u003ch6 class=\"selectum__head\"\u003eColor Picker\u003c/h6\u003e\n        \u003cdiv class=\"selectum__select\"\u003e\n            \u003cspan class=\"selectum__select__current i-arrow-bottom_after js-raw\" data-selectum-clickable data-selectum-current\u003e\u003c/span\u003e\n            \u003cul class=\"selectum__select__list\" data-selectum-list\u003e\n                \u003cli data-selectum-reset\u003eAny\u003c/li\u003e\n                \u003cli data-selectum-id=\"r\" data-selectum-val=\"red\"\u003ered\u003c/li\u003e\n                \u003cli data-selectum-id=\"y\" data-selectum-val=\"yellow\"\u003eyellow\u003c/li\u003e\n                \u003cli data-selectum-id=\"g\" data-selectum-val=\"green\"\u003egreen\u003c/li\u003e\n                \u003cli data-selectum-id=\"b\" data-selectum-val=\"blue\"\u003eblue\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Url updating select:\n\u003e In despite of the previous one this select can update url using History API and *can be updated* from URL parameter with the *lang* name. E.g. after selecting English as a language the URL will become smth like `location.origin/?lang=en`. The page won't be reloaded as pushState method is invoked.'\n\n```html\n\u003cdiv data-selectum=\"lang\" data-selectum-placeholder=\"Set language\" data-selectum-update-url data-selectum-url-fetch\u003e\n    \u003cdiv class=\"plugin\"\u003e\n        \u003cdiv class=\"selectum__select\"\u003e\n            \u003cspan class=\"selectum__select__current i-arrow-bottom_after js-raw\" data-selectum-clickable data-selectum-current\u003e\u003c/span\u003e\n            \u003cul class=\"selectum__select__list\" data-selectum-list\u003e\n                \u003cli data-selectum-reset\u003eDefault (EN)\u003c/li\u003e\n                \u003cli data-selectum-id=\"en\" data-selectum-val=\"English\"\u003eEnglish\u003c/li\u003e\n                \u003cli data-selectum-id=\"de\" data-selectum-val=\"Deutsch\"\u003eDeutsch\u003c/li\u003e\n                \u003cli data-selectum-id=\"fr\" data-selectum-val=\"Francaise\"\u003eFrancaise\u003c/li\u003e\n                \u003cli data-selectum-id=\"ru\" data-selectum-val=\"Русский\"\u003eРусский\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Main Select and Dependent one:\n\u003e This is single select which updates history pushState, configured via data-attributes and has no dependent selects.\n\n##### Differences:\n1. has ```[data-selectum-picker]``` attribute, which generates proper css ```#selectum-hiding-styles``` that filter dependent selects subsets;\n2. has ```[data-selectum-emit]``` attribute, here it emites *countryPicked* event and plugin with ```[data-selectum-listen=\"countryPicked\"]``` will listen for this event to enable oneself and clean url parameter if necessary;\n3. doesn't have ```[data-selectum-clickable]```  so open event will be triggered on ```[data-selectum]``` element click, i.e. plugin.\n\n```html\n\u003caside data-selectum=\"country\" data-selectum-picker data-selectum-emit=\"countryPicked\" data-selectum-placeholder=\"Pick Country\"\u003e\n    \u003ch3\u003eEurasia\u003c/h3\u003e\n    \u003cdiv class=\"selectum__select\"\u003e\n        \u003cspan class=\"i-arrow-bottom_after js-raw\" data-selectum-current\u003e\u003c/span\u003e\n        \u003cul class=\"selectum__select__list\" data-selectum-list\u003e\n            \u003cli data-selectum-reset\u003eAny\u003c/li\u003e\n            \u003cli data-selectum-id=\"UK\" data-selectum-val=\"United Kingdom\"\u003eUnited Kingdom\u003c/li\u003e\n            \u003cli data-selectum-id=\"DE\" data-selectum-val=\"Germany\"\u003eGermany\u003c/li\u003e\n            \u003cli data-selectum-id=\"FR\" data-selectum-val=\"France\"\u003eFrance\u003c/li\u003e\n            \u003cli data-selectum-id=\"UA\" data-selectum-val=\"Ukraine\"\u003eUkraine\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/aside\u003e\n\n\u003caside data-selectum=\"city\" data-selectum-picked data-selectum-listen=\"countryPicked\" data-selectum-placeholder=\"Pick City\"\u003e\n   \u003ch3\u003eEurasia\u003c/h3\u003e\n   \u003csection\u003e\n       \u003cdiv class=\"i-arrow-bottom_after js-raw\" data-selectum-current\u003e\u003c/div\u003e\n       \u003cdiv class=\"selectum__select__list\" data-selectum-list data-selectum-list-hiddable=\"country\"\u003e\n            \u003cbutton data-selectum-reset\u003eAny\u003c/button\u003e\n            \u003cul data-selectum-hidden-unless=\"UK\"\u003e\n                \u003cli data-selectum-id=\"LND\" data-selectum-val=\"London\"\u003eLondon\u003c/li\u003e\n                \u003cli data-selectum-id=\"BKW\" data-selectum-val=\"Bakewell\"\u003eBakewell\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul data-selectum-hidden-unless=\"DE\"\u003e\n                \u003cli data-selectum-id=\"BRL\" data-selectum-val=\"Berlin\"\u003eBerlin\u003c/li\u003e\n                \u003cli data-selectum-id=\"AAC\" data-selectum-val=\"Aachen\"\u003eAachen\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul data-selectum-hidden-unless=\"FR\"\u003e\n                \u003cli data-selectum-id=\"PRS\" data-selectum-val=\"Paris\"\u003eParis\u003c/li\u003e\n                \u003cli data-selectum-id=\"MRC\" data-selectum-val=\"Marseille\"\u003eMarseille\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul data-selectum-hidden-unless=\"UA\"\u003e\n              \u003cli data-selectum-id=\"ODS\" data-selectum-val=\"Odessa\"\u003eOdessa\u003c/li\u003e\n              \u003cli data-selectum-id=\"KIV\" data-selectum-val=\"Kiev\"\u003eKiev\u003c/li\u003e\n            \u003c/ul\u003e\n       \u003c/div\u003e\n   \u003c/section\u003e\n\u003c/aside\u003e\n```\n\n### Main Select and Dependent one reset:\n\u003e This plugin in despite of the previous one after reset button is clicked will set the dependent one to it's raw state, using ```js-raw``` class.\n\n```html\n\u003caside data-selectum=\"country\" data-selectum-picker data-selectum-emit=\"countryPicked\" data-selectum-emit-reset=\"clearCities\" data-selectum-placeholder=\"Pick Country\"\u003e\n    \u003ch3\u003eEurasia\u003c/h3\u003e\n    \u003cdiv class=\"selectum__select\"\u003e\n        \u003cspan class=\"i-arrow-bottom_after js-raw\" data-selectum-current\u003e\u003c/span\u003e\n        \u003cul class=\"selectum__select__list\" data-selectum-list\u003e\n            \u003cli data-selectum-reset\u003eAny\u003c/li\u003e\n            \u003cli data-selectum-id=\"UK\" data-selectum-val=\"United Kingdom\"\u003eUnited Kingdom\u003c/li\u003e\n            \u003cli data-selectum-id=\"DE\" data-selectum-val=\"Germany\"\u003eGermany\u003c/li\u003e\n            \u003cli data-selectum-id=\"FR\" data-selectum-val=\"France\"\u003eFrance\u003c/li\u003e\n            \u003cli data-selectum-id=\"UA\" data-selectum-val=\"Ukraine\"\u003eUkraine\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/aside\u003e\n\n\u003caside data-selectum=\"city\" data-selectum-picked data-selectum-listen=\"countryPicked\" data-selectum-listen-reset=\"clearCities\" data-selectum-placeholder=\"Pick City\"\u003e\n   \u003ch3\u003eEurasia\u003c/h3\u003e\n   \u003csection\u003e\n       \u003cdiv class=\"i-arrow-bottom_after js-raw\" data-selectum-current\u003e\u003c/div\u003e\n       \u003cdiv class=\"selectum__select__list\" data-selectum-list data-selectum-list-hiddable=\"country\"\u003e\n            \u003cbutton data-selectum-reset\u003eAny\u003c/button\u003e\n            \u003cul data-selectum-hidden-unless=\"UK\"\u003e\n                \u003cli data-selectum-id=\"LND\" data-selectum-val=\"London\"\u003eLondon\u003c/li\u003e\n                \u003cli data-selectum-id=\"BKW\" data-selectum-val=\"Bakewell\"\u003eBakewell\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul data-selectum-hidden-unless=\"DE\"\u003e\n                \u003cli data-selectum-id=\"BRL\" data-selectum-val=\"Berlin\"\u003eBerlin\u003c/li\u003e\n                \u003cli data-selectum-id=\"AAC\" data-selectum-val=\"Aachen\"\u003eAachen\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul data-selectum-hidden-unless=\"FR\"\u003e\n                \u003cli data-selectum-id=\"PRS\" data-selectum-val=\"Paris\"\u003eParis\u003c/li\u003e\n                \u003cli data-selectum-id=\"MRC\" data-selectum-val=\"Marseille\"\u003eMarseille\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul data-selectum-hidden-unless=\"UA\"\u003e\n              \u003cli data-selectum-id=\"ODS\" data-selectum-val=\"Odessa\"\u003eOdessa\u003c/li\u003e\n              \u003cli data-selectum-id=\"KIV\" data-selectum-val=\"Kiev\"\u003eKiev\u003c/li\u003e\n            \u003c/ul\u003e\n       \u003c/div\u003e\n   \u003c/section\u003e\n\u003c/aside\u003e\n```\n\n### Select rendered by client with a default template:\n\u003e This select can be rendered dynamically by client side and configured either by attribtes or js means.\n\nCustom array of objects or string of elements should be passed to select\n\n```javascript\nvar select = null;\n\n [].slice.call( document.querySelectorAll('[data-selectum]') ).forEach( function(el) {\n     select = new Selectum(el);\n });\n\nwindow.setTimeout(function() {\n  select.render({\n    head: select.options.head || 'Any other head', // Optional\n    items: [\n       {id : 0, val : 'apple'},\n       {id : 1, val : 'banana'},\n       {id : 2, val : 'tangerin'}\n    ]\n  })\n}, Math.random() * 2000 + 1000);\n```\n\n```html\n\u003caside data-selectum=\"fruit\" data-selectum-picker data-selectum-emit=\"fruit:chosen\" data-selectum-emit-reset=\"sell:fruits\" data-selectum-placeholder=\"Get your Fruit\" data-selectum-head=\"Buy a Fruit\" data-selectum-render\u003e\u003c/aside\u003e\n```\n\n\u003e This will be rendered into\n\n```html\n\u003caside data-selectum=\"country\" data-selectum-picker data-selectum-emit=\"fruit:chosen\" data-selectum-emit-reset=\"sell:fruits\" data-selectum-placeholder=\"Get your Fruit\" data-selectum-head=\"Buy a Fruit\" data-selectum-render\u003e\u003c/aside\u003e\n    \u003ch3 class=\"selectum__head\"\u003eBuy a Fruit\u003c/h3\u003e\n    \u003cdiv class=\"selectum__select\"\u003e\n        \u003cspan class=\"selectum__select__current i-arrow-bottom_after js-raw\" data-selectum-current\u003eGet your Fruit\u003c/span\u003e\n        \u003cul class=\"selectum__select__list\" data-selectum-list\u003e\n            \u003cli data-selectum-reset\u003eAny\u003c/li\u003e\n            \u003cli data-selectum-id=\"0\" data-selectum-val=\"apple\"\u003eapple\u003c/li\u003e\n            \u003cli data-selectum-id=\"1\" data-selectum-val=\"banana\"\u003ebanana\u003c/li\u003e\n            \u003cli data-selectum-id=\"2\" data-selectum-val=\"tangerin\"\u003etangerin\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/aside\u003e\n```\n\n### Select rendered by client with a default template:\n\u003e This is the dependent select which depend on the fruit one, that can be set via ```[data-selectum-hiddable=\"fruit\"]``` attribute or with js by passing ```listen: 'fruit'``` setting key.\n\nCustom array of objects or string of elements should be passed to select\n\n```javascript\nvar select = null;\n\n [].slice.call( document.querySelectorAll('[data-selectum]') ).forEach( function(el) {\n     select = new Selectum(el);\n });\n\nwindow.setTimeout(function() {\n  select.render({\n    head: select.options.head || 'Any other head', // Optional\n    listen: 'fruit', // Optional, just for example, unnecessary here as it's duplicated via data-selectum-hiddable attribute\n    items: [\n    {\n        id : '0',\n        val : [\n            {id : 00, val : 'green'},\n            {id : 01, val : 'red'},\n            {id : 02, val : 'yellow'}\n       ]\n   },\n    {\n        id : '1',\n        val : [\n            {id : 10, val : 'fresh'},\n            {id : 11, val : 'rotten'},\n            {id : 12, val : 'green'}\n       ]\n   },\n   {\n       id : '2',\n       val : [\n           {id : 20, val : 'sweet'},\n           {id : 21, val : 'sour'},\n           {id : 22, val : 'mild'}\n      ]\n  }\n   ]\n  })\n}, Math.random() * 2000 + 1000);\n```\n\n```html\n\u003caside data-selectum=\"fruit\" data-selectum-head=\"Fruit Type\" data-selectum-picked data-selectum-listen=\"fruit:chosen\" data-selectum-listen-reset=\"sell:fruits\" data-selectum-placeholder=\"Get your Fruit\" data-selectum-head=\"Buy a Fruit\" data-selectum-render data-selectum-hiddable=\"fruit\"\u003e\u003c/aside\u003e\n```\n\n\u003e This will be rendered into\n\n```html\n\u003caside data-selectum=\"fruit\" data-selectum-head=\"Fruit Type\" data-selectum-picked=\"\" data-selectum-listen=\"fruit:chosen\" data-selectum-listen-reset=\"sell:fruits\" data-selectum-placeholder=\"Get your Fruit\" data-selectum-render=\"\" data-selectum-hiddable=\"fruit\" class=\"js-disabled\"\u003e\n    \u003ch3 class=\"selectum__head\"\u003eFruit Type\u003c/h3\u003e\n    \u003csection\u003e\n        \u003cdiv class=\"selectum__select__current i-arrow-bottom_after js-raw\" data-selectum-current=\"\"\u003eGet your Fruit\u003c/div\u003e\n        \u003cdiv class=\"selectum__select__list\" data-selectum-list=\"\" data-selectum-list-hiddable=\"fruit\"\u003e\n            \u003cbutton data-selectum-reset=\"\"\u003eAny\u003c/button\u003e\n            \u003cul data-selectum-hidden-unless=\"0\"\u003e\n                \u003cli data-selectum-id=\"0\" data-selectum-val=\"green\"\u003egreen\u003c/li\u003e\n                \u003cli data-selectum-id=\"1\" data-selectum-val=\"red\"\u003ered\u003c/li\u003e\n                \u003cli data-selectum-id=\"2\" data-selectum-val=\"yellow\"\u003eyellow\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul data-selectum-hidden-unless=\"1\"\u003e\n                \u003cli data-selectum-id=\"10\" data-selectum-val=\"fresh\"\u003efresh\u003c/li\u003e\n                \u003cli data-selectum-id=\"11\" data-selectum-val=\"rotten\"\u003erotten\u003c/li\u003e\n                \u003cli data-selectum-id=\"12\" data-selectum-val=\"green\"\u003egreen\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul data-selectum-hidden-unless=\"2\"\u003e\n                \u003cli data-selectum-id=\"20\" data-selectum-val=\"sweet\"\u003esweet\u003c/li\u003e\n                \u003cli data-selectum-id=\"21\" data-selectum-val=\"sour\"\u003esour\u003c/li\u003e\n                \u003cli data-selectum-id=\"22\" data-selectum-val=\"mild\"\u003emild\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    \u003c/section\u003e\n\u003c/aside\u003e\n```\n\n### Select rendered by client with a custom template:\n\u003e This select can be rendered dynamically by client side and configured either by attribtes or js means.\n\nCustom array of objects or string of elements should be passed to select\n\n```javascript\nvar select = null;\n    [].slice.call( document.querySelectorAll('[data-selectum]') ).forEach( function(el) {\n        select = new Selectum(el);\n    });\n\nwindow.setTimeout(function() {\n  select.render({\n    items: [\n       {id : 0, val : 'apple'},\n       {id : 1, val : 'banana'},\n       {id : 2, val : 'tangerin'}\n    ]\n  })\n}, 3000);\n\nwindow.setTimeout(function() {\n  select.render({\n    head: 'Totally changed head',\n    items: [\n       {id : 0, val : 'some'},\n       {id : 1, val : 'other'},\n       {id : 2, val : 'array'},\n       {id : 3, val : 'maybe'},\n       {id : 4, val : 'enormous'}\n    ]\n  })\n}, 7000);\n```\n\n```html\n\u003caside data-selectum=\"fruit\" data-selectum-head=\"Fruit Type\" data-selectum-picker data-selectum-emit=\"fruit:chosen\" data-selectum-emit-reset=\"sell:fruits\" data-selectum-placeholder=\"Get your Fruit\" data-selectum-head=\"Buy a Fruit\" data-selectum-render data-selectum-exist\u003e\n    \u003ch3\u003e\u003c%=head%\u003e\u003c/h3\u003e\n    \u003cdiv class=\"selectum__select\"\u003e\n        \u003cspan class=\"i-arrow-bottom_after js-raw\" data-selectum-current\u003e\u003c/span\u003e\n        \u003cul class=\"selectum__select__list\" data-selectum-list\u003e\n            \u003cli data-selectum-reset\u003eAny\u003c/li\u003e\n          \u003c% for ( var i = 0; i \u003c items.length; i++ ) { %\u003e\n            \u003cli data-selectum-id=\"\u003c%=items[i].id%\u003e\" data-selectum-val=\"\u003c%=items[i].val%\u003e\"\u003e\u003c%=items[i].val%\u003e\u003c/li\u003e\n          \u003c% } %\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/aside\u003e\n```\n\n\u003e This will be rendered straight into this first\n\n```html\n\u003caside data-selectum=\"stuff\" data-selectum-head=\"Item Type\" data-selectum-picker data-selectum-emit=\"stuff:chosen\" data-selectum-emit-reset=\"sell:stuff\" data-selectum-placeholder=\"Get your Fruit\" data-selectum-head=\"Buy a Fruit\" data-selectum-render data-selectum-exist=\"Loading stuff...'\u003e\n    \u003ch3 data-selectum-temp-head\u003eLoading stuff...\u003c/h3\u003e\n\u003c/aside\u003e\n```\n\u003e Then after 3 and 7 secs into this correspondingly\n\n```html\n\u003caside data-selectum=\"stuff\" data-selectum-head=\"Item Type\" data-selectum-picker data-selectum-emit=\"stuff:chosen\" data-selectum-emit-reset=\"sell:stuff\" data-selectum-placeholder=\"Get your Fruit\" data-selectum-head=\"Buy a Fruit\" data-selectum-render data-selectum-exist=\"Loading stuff...'\u003e\n    \u003ch3 class=\"selectum__head\"\u003eTotally changd head\u003c/h3\u003e\n    \u003cdiv class=\"selectum__select\"\u003e\n        \u003cspan class=\"selectum__select__current i-arrow-bottom_after js-raw\" data-selectum-current\u003eGet your Fruit\u003c/span\u003e\n        \u003cul class=\"selectum__select__list\" data-selectum-list\u003e\n            \u003cli data-selectum-reset\u003eAny\u003c/li\u003e\n            \u003cli data-selectum-id=\"0\" data-selectum-val=\"some\"\u003esome\u003c/li\u003e\n            \u003cli data-selectum-id=\"1\" data-selectum-val=\"other\"\u003eother\u003c/li\u003e\n            \u003cli data-selectum-id=\"2\" data-selectum-val=\"array\"\u003earray\u003c/li\u003e\n            \u003cli data-selectum-id=\"3\" data-selectum-val=\"maybe\"\u003emaybe\u003c/li\u003e\n            \u003cli data-selectum-id=\"4\" data-selectum-val=\"enormous\"\u003eenormous\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/aside\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslantz%2Fselectum","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslantz%2Fselectum","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslantz%2Fselectum/lists"}