{"id":23937567,"url":"https://github.com/jeankouss/selectance","last_synced_at":"2025-07-23T13:37:15.276Z","repository":{"id":134536263,"uuid":"582405141","full_name":"JeanKouss/selectance","owner":"JeanKouss","description":"A backend and frontend friendly way to make your select html tag select multiple options.","archived":false,"fork":false,"pushed_at":"2023-03-17T15:42:28.000Z","size":35,"stargazers_count":4,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T12:51:21.208Z","etag":null,"topics":["html","js","multiselect","select"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/JeanKouss.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-26T18:14:44.000Z","updated_at":"2024-02-02T23:45:38.000Z","dependencies_parsed_at":"2023-06-17T15:00:46.715Z","dependency_job_id":null,"html_url":"https://github.com/JeanKouss/selectance","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JeanKouss%2Fselectance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JeanKouss%2Fselectance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JeanKouss%2Fselectance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JeanKouss%2Fselectance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JeanKouss","download_url":"https://codeload.github.com/JeanKouss/selectance/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249793372,"owners_count":21326539,"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":["html","js","multiselect","select"],"created_at":"2025-01-06T02:13:19.591Z","updated_at":"2025-04-19T20:24:54.047Z","avatar_url":"https://github.com/JeanKouss.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Selectance\n\nA backend and frontend friendly way to make multiple option selection in your HTML forms built in an easy to use way.\n\n[![Status](https://img.shields.io/badge/status-active-success.svg)](Status)\n[![GitHub Issues](https://img.shields.io/github/issues/JeanKouss/selectance.svg)](https://github.com/JeanKouss/selectance/issues)\n[![GitHub Pull Requests](https://img.shields.io/github/issues-pr/JeanKouss/selectance.svg)](https://github.com/JeanKouss/selectance/pulls)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n\n## 📝 Table of Contents\n\n- [Selectance](#selectance)\n  - [📝 Table of Contents](#-table-of-contents)\n  - [🔍 About ](#-about-)\n  - [🏁 Getting Started ](#-getting-started-)\n  - [💄 Customizing the style ](#-customizing-the-style-)\n  - [🔧 Running the tests ](#-running-the-tests-)\n\n## 🔍 About \u003ca id = \"about\"\u003e\u003c/a\u003e\n\nSelectance gives you a way to make multiple options selection in HTML form. Here are some reasons you should use it :\n\n- Easy to use : no JavaScript skill needed,\n- Fast to implement : write the HTML code and let Selectance cares the rest for you,\n- Preselection support,\n- The submited values can be different from the text user sees,\n- Full customisable style.\n\n## 🏁 Getting Started \u003ca id = \"getting_started\"\u003e\u003c/a\u003e\n\nSteps to use it :\n\n1. Download sources from src/main :\n\n   - [selectance-script.js](src/main/selectance-script.js) the main js script,\n   - [selectance-style.css](src/main/selectance-style.css) a required css file. This file works in pair with selectance-script.js file and is for hidding or showing elements according to the class they are affected by selectance-script. It also apply a basic style to the selector.\n  \n2. Link files :\n\n    Now link the downloaded files to your HTML. The style link can be everywhere but it is important to put the script after all the place you will use the multiselector.\n\n    ```html\n    \u003clink rel=\"stylesheet\" href=\"path/to/selectance-style.css\"\u003e\n    ```\n\n    ```html\n    \u003cscript src=\"path/to/selectance-script.js\"\u003e\u003c/script\u003e\n    ```\n\n3. Add class \"multiselector\" to HTML select elements that needs multiselect.\n   \n   ```html\n\t\u003cselect name=\"fruits\" id=\"fruits\" class=\"multiselector\"\u003e\n\t\t\u003c!-- Options --\u003e\n\t\u003c/select\u003e\n   ```\n\n## 💄 Customizing the style \u003ca name = \"customizing the style\"\u003e\u003c/a\u003e\n\nSelectance works by removing the basic select element and uses other generated elements instead. So it can be anoying to customize multiselectors style.\n\nFortunately, there is a file [here](src/customization/selectance-custom_style.css) that will help you making the customization. In this file you will find the css selectors already writen and indications on the way to use them.\n\nYou can use it alone to code yourself all the style or link it after linking the main style (selectance-style.css), to overwrite the main style.\n\nIf you want to contribute by sharing you style customization, it will be great!\n\n## 🔧 Running the tests \u003ca name = \"tests\"\u003e\u003c/a\u003e\n\nTo test it, you can download the repository and open test/fruits.html in you browser.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeankouss%2Fselectance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeankouss%2Fselectance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeankouss%2Fselectance/lists"}