{"id":13425667,"url":"https://github.com/paulstraw/FancySelect","last_synced_at":"2025-03-15T20:31:04.163Z","repository":{"id":9985609,"uuid":"12014953","full_name":"paulstraw/FancySelect","owner":"paulstraw","description":"A better select for discerning web developers everywhere.","archived":true,"fork":false,"pushed_at":"2018-10-01T18:09:40.000Z","size":108,"stargazers_count":753,"open_issues_count":37,"forks_count":165,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-03-10T11:51:13.428Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://code.octopuscreative.com/fancyselect/","language":"HTML","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/paulstraw.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-08-10T03:29:13.000Z","updated_at":"2025-02-20T02:07:57.000Z","dependencies_parsed_at":"2022-09-02T14:22:33.594Z","dependency_job_id":null,"html_url":"https://github.com/paulstraw/FancySelect","commit_stats":null,"previous_names":["octopuscreative/fancyselect"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulstraw%2FFancySelect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulstraw%2FFancySelect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulstraw%2FFancySelect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulstraw%2FFancySelect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paulstraw","download_url":"https://codeload.github.com/paulstraw/FancySelect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242912420,"owners_count":20205667,"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-07-31T00:01:16.404Z","updated_at":"2025-03-15T20:31:03.557Z","avatar_url":"https://github.com/paulstraw.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# NOTICE: FancySelect is no longer actively maintained.\n\nNow that it's possible to easily style `select` elements in all major browsers, I am no longer maintaining FancySelect. Native `select`s are more usable and accessible, and you should probably use them. You're welcome to use FancySelect, but for the time being it is not officially supported.\n\nFeel free to yell at me on Twitter about this: https://twitter.com/paulstraw\n\n-paul\n\n\nFancySelect\n===========\n\nA better select for discerning web developers everywhere, lovingly crafted by [Paul Straw](http://paulstraw.com). You can download it here, or [check out the demo](http://code.octopuscreative.com/fancyselect/).\n\nBasic Usage\n-----------\n\nFancySelect is easy to use. Just include jQuery or Zepto, target any `select` element on the page, and call `.fancySelect()` on it. If the select has an option with no value, it'll be used as a sort of placeholder text.\n\nBy default, FancySelect uses native selects and styles only the trigger on iOS devices. To override this, pass an object with `forceiOS` set to `true` when initializing it.\n\nFancySelect also passes any classes specified in the select's `data-class` attribute, which you can use to style specific FancySelect instances.\n\n\n### HTML\n\n``` html\n\u003cselect class=\"basic\"\u003e\n  \u003coption value=\"\"\u003eSelect something…\u003c/option\u003e\n  \u003coption\u003eLorem\u003c/option\u003e\n  \u003coption\u003eIpsum\u003c/option\u003e\n  \u003coption\u003eDolor\u003c/option\u003e\n  \u003coption\u003eSit\u003c/option\u003e\n  \u003coption\u003eAmet\u003c/option\u003e\n\u003c/select\u003e\n```\n\n### JavaScript\n\n``` javascript\n$('.basic').fancySelect();\n```\n\n\nUpdating Options\n----------------\n\nIf the options in your select change after initializing FancySelect, you can tell it to rebuild the list of options by triggering `update.fs` on the select element.\n\n### JavaScript\n\n``` javascript\nvar mySelect = $('.my-select');\n\nmySelect.fancySelect();\n\nmySelect.append('\u003coption\u003eFoo\u003c/option\u003e\u003coption\u003eBar\u003c/option\u003e');\n\nmySelect.trigger('update.fs');\n```\n\nEnabling/Disabling\n------------------\n\nFancySelect will automatically pick up your `select`'s `disabled` property on initialization. If you need to enable or disable it again later, you can do that by triggering `enable.fs` or `disable.fs` on your select element.\n\n### HTML\n\n``` html\n\u003cselect class=\"my-select\" disabled\u003e\n\t\u003coption\u003eFirst Option\u003c/option\u003e\n\t\u003coption\u003eSecond Option\u003c/option\u003e\n\u003c/select\u003e\n```\n\n### JavaScript\n\n``` javascript\nvar mySelect = $('.my-select');\nmySelect.fancySelect(); // currently disabled because of html property\n\n// later…\nmySelect.trigger('enable.fs'); // now enabled\n\n// even later…\nmySelect.trigger('disable.fs'); // now disabled again\n```\n\n\nIncluding Blank Option\n----------------------\n\nFancySelect can include the blank option in the options list if you pass the `includeBlank` parameter:\n\n### JavaScript\n\n```\nvar mySelect = $('.my-select');\nmySelect.fancySelect({includeBlank: true});\n```\n\nTemplates\n---------\n\nIf you need to do something fancy with the trigger or the individual options, you can use `triggerTemplate` or `optionTemplate`, which are both functions passed an `option` element (jQuery-wrapped) and returning an HTML string to render.\n\n\n### HTML\n\n``` html\n\u003cselect class=\"bulbs\"\u003e\n\t\u003coption data-icon=\"old\"\u003eIncandescent\u003c/option\u003e\n\t\u003coption data-icon=\"curly\"\u003eCFL\u003c/option\u003e\n\t\u003coption data-icon=\"work\"\u003eHalogen\u003c/option\u003e\n\u003c/select\u003e\n```\n\n``` javascript\n$('.bulbs').fancySelect({\n\toptionTemplate: function(optionEl) {\n\t\treturn optionEl.text() + '\u003cdiv class=\"icon-' + optionEl.data('icon') + '\"\u003e\u003c/div\u003e';\n\t}\n}\n})\n```\n\nTriggering the change event\n---------------------------\n\nYou can listen to the `change.fs` event in order to trigger the DOM's change event on the `\u003cselect\u003e` element.\n\n### HTML\n\n``` html\n\u003cselect class=\"my-select\" disabled\u003e\n\t\u003coption\u003eFirst Option\u003c/option\u003e\n\t\u003coption\u003eSecond Option\u003c/option\u003e\n\u003c/select\u003e\n```\n\n### JavaScript\n\n``` javascript\nvar mySelect = $('.my-select');\nmySelect.fancySelect().on('change.fs', function() {\n\t$(this).trigger('change.$');\n}); // trigger the DOM's change event when changing FancySelect\n```\n\n\nContributions\n-------------\n\nAny contribution is absolutely welcome, but please review the contribution guidelines before getting started.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulstraw%2FFancySelect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaulstraw%2FFancySelect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulstraw%2FFancySelect/lists"}