{"id":18675811,"url":"https://github.com/creativeit/getmdl-select","last_synced_at":"2025-04-04T15:08:12.574Z","repository":{"id":57741972,"uuid":"46976387","full_name":"CreativeIT/getmdl-select","owner":"CreativeIT","description":"Select for material-design-lite","archived":false,"fork":false,"pushed_at":"2019-10-29T13:59:59.000Z","size":3792,"stargazers_count":300,"open_issues_count":19,"forks_count":84,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-28T14:07:40.874Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://creativeit.github.io/getmdl-select/","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/CreativeIT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-27T11:18:13.000Z","updated_at":"2025-03-10T18:09:46.000Z","dependencies_parsed_at":"2022-09-10T22:52:05.773Z","dependency_job_id":null,"html_url":"https://github.com/CreativeIT/getmdl-select","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CreativeIT%2Fgetmdl-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CreativeIT%2Fgetmdl-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CreativeIT%2Fgetmdl-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CreativeIT%2Fgetmdl-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CreativeIT","download_url":"https://codeload.github.com/CreativeIT/getmdl-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198459,"owners_count":20900080,"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":"2024-11-07T09:26:28.813Z","updated_at":"2025-04-04T15:08:12.555Z","avatar_url":"https://github.com/CreativeIT.png","language":"JavaScript","readme":"    \n# getmdl-select\nMaterial Design Lite selectfield component for [material-design-lite](https://github.com/google/material-design-lite)\n\n## Live example\n\n![alt tag](https://raw.github.com/CreativeIT/getmdl-select/gh-pages/lib/index_mdl/select_mdl.gif)\n\nCheck out the [DEMO](http://creativeit.github.io/getmdl-select/)\n\n## Install\n\nThere are three ways to install getmdl-select:\n\n 1. Using [npm](http://npmjs.org/):\n    Use this command in your command line: \n    ```bash\n    npm install getmdl-select\n    ```\n 2. Using [Bower](http://bower.io/):\n    Use this command in your command line: \n    ```bash\n    bower install getmdl-select\n    ```\n 3. Clone the repo using Git:\n\n    ```bash\n    git clone https://github.com/CreativeIT/getmdl-select.git\n    ```\n    \n    Alternatively you can [download](https://github.com/CreativeIT/getmdl-select/archive/master.zip)\nthis repository and then:\n    \n    ```bash\n    cd getmdl-select   \n    npm install\n    ```\n\n## Basic use\nTo use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `\u003chead\u003e` section of the page, as described in the MDL Introduction.\n   ```html\n   \u003c!-- getmdl --\u003e\n   \u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\u003e\n   \u003clink rel=\"stylesheet\" href=\"your_path_to/material-design-lite/material.min.css\"\u003e\n   \u003cscript defer src=\"your_path_to/material-design-lite/material.min.js\"\u003e\u003c/script\u003e   \n   \u003c!--getmdl-select--\u003e   \n   \u003clink rel=\"stylesheet\" href=\"path_to/getmdl-select/getmdl-select.min.css\"\u003e\n   \u003cscript defer src=\"path_to/getmdl-select/getmdl-select.min.js\"\u003e\u003c/script\u003e\n   ```\n\n### Example\n\nSimple select field. To see other examples visit [this page](http://creativeit.github.io/getmdl-select/).\n ```html\n    \u003cdiv class=\"mdl-textfield mdl-js-textfield getmdl-select\"\u003e\n       \u003cinput class=\"mdl-textfield__input\" value=\"\" id=\"country\" readonly/\u003e\n       \u003cinput value=\"\" type=\"hidden\" name=\"country\"/\u003e\n       \u003clabel class=\"mdl-textfield__label\" for=\"country\"\u003eCountry\u003c/label\u003e\n       \u003cul class=\"mdl-menu mdl-menu--bottom-left mdl-js-menu\" for=\"country\"\u003e\n         \u003cli class=\"mdl-menu__item\" data-val=\"BLR\"\u003eBelarus\u003c/li\u003e\n         \u003cli class=\"mdl-menu__item\" data-val=\"BRA\"\u003eBrazil\u003c/li\u003e\n         \u003cli class=\"mdl-menu__item\" data-val=\"FRA\"\u003eFrance\u003c/li\u003e\n         \u003cli class=\"mdl-menu__item\" data-val=\"DEU\"\u003eGermany\u003c/li\u003e\n         \u003cli class=\"mdl-menu__item\" data-val=\"RUS\"\u003eRussia\u003c/li\u003e\n       \u003c/ul\u003e\n    \u003c/div\u003e\n ```\n### Important\nIf you want to use more than one getmdl-select item use different ids for inputs and don't forget to change `ul` and `label`'s `for` attributes. It works wrong without this.\n\n## Configuration options \n#### Dynamically usage\nFor dynamically usage, you must add `getmdlSelect.init(cssSelector)` in javascript code, (where cssSelector, for example, is `\".getmdl-select\"` or `\"#mySelect\"`), after new item is created or any new element added to existing list. \n\n#### data-val\nEvery `li` should have its own `data-val` attribute. Choosing any element of select you change `value` of hidden `input` as `data-val` property of corresponding\n`li`. Also you change `value` of readonly `input` to `li.textContent`. Then after form submit, next pair `hiddenInputName=hiddenInputValue` will send to server side.\n\n#### Pre-selected item\nTo set pre-selected value add `data-selected=\"true\"` attribute to corresponding `li` in your list.\n\n#### Width\nInitial Select takes the default width (300px). You can change it by overriding the CSS property `width`.\n\n#### Height\nOptions list automatically adapt to the maximum height by content. If you want to use small height (300px) and see scroll bar, add class `getmdl-select__fix-height`.\n    \n## LICENSE\nSee the [LICENSE file](https://github.com/CreativeIT/getmdl-select/blob/master/LICENSE.txt)(MIT).\n\n## Hire us\nWe are ready to bring value to your business. Visit our site [creativeit.io](http://creativeit.io/) or drop us a line \u003chello@creativeit.io\u003e. We will be happy to help you!\n\n## Support the project\n* Star the repo\n* Create issue report or feature request\n* [Tweet about it](https://twitter.com/CreativeITeam)\n* Follow us on [Twitter](https://twitter.com/CreativeITeam)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativeit%2Fgetmdl-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreativeit%2Fgetmdl-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativeit%2Fgetmdl-select/lists"}