{"id":48138514,"url":"https://github.com/codeshackio/dynamic-select-images-js","last_synced_at":"2026-04-04T16:48:08.484Z","repository":{"id":242091408,"uuid":"808665652","full_name":"codeshackio/dynamic-select-images-js","owner":"codeshackio","description":"Dynamic Select with Images enhances HTML select elements by adding image support and custom HTML content. This lightweight JavaScript library allows you to create dynamic, visually appealing dropdowns with images, customizable placeholders, and multiple columns, improving user experience in modern web applications.","archived":false,"fork":false,"pushed_at":"2025-06-06T10:43:22.000Z","size":21,"stargazers_count":11,"open_issues_count":6,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-06T11:34:30.087Z","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/codeshackio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":["codeshackio"],"custom":["https://paypal.me/codeshack"]}},"created_at":"2024-05-31T14:48:16.000Z","updated_at":"2025-06-06T10:43:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"c951d230-cd83-47d6-b305-7efdf5fcda21","html_url":"https://github.com/codeshackio/dynamic-select-images-js","commit_stats":null,"previous_names":["codeshackio/dynamic-select-images-js"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/codeshackio/dynamic-select-images-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeshackio%2Fdynamic-select-images-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeshackio%2Fdynamic-select-images-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeshackio%2Fdynamic-select-images-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeshackio%2Fdynamic-select-images-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeshackio","download_url":"https://codeload.github.com/codeshackio/dynamic-select-images-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeshackio%2Fdynamic-select-images-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31406118,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"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":"2026-04-04T16:48:08.142Z","updated_at":"2026-04-04T16:48:08.455Z","avatar_url":"https://github.com/codeshackio.png","language":"JavaScript","funding_links":["https://github.com/sponsors/codeshackio","https://paypal.me/codeshack"],"categories":[],"sub_categories":[],"readme":"# Dynamic Select with Images\n\nA simple and easy-to-use dynamic select with images using HTML and JavaScript. This project allows you to create a dynamic select dropdown that displays images alongside the options, enhancing user experience and adding a visual touch to dropdown menus.\n\nThe complete guide and reference is available here: [https://codeshack.io/multi-select-dropdown-html-javascript/](https://codeshack.io/dynamic-select-images-html-javascript/)\n\n## Features\n\n- Dynamic select dropdown with images\n- Customizable placeholder text\n- Multiple columns for dropdown options\n- Custom HTML content for options\n- Easy integration with existing forms\n- Lightweight and fast\n\n## Screenshot\n\n![Screenshot of Multi Select Dropdown](assets/screenshot.png)\n\n## Quick Start\n\n1. Download the latest stable version from the releases section.\n\n2. Include the necessary CSS and JavaScript files in your project:\n    ```html\n    \u003clink href=\"DynamicSelect.css\" rel=\"stylesheet\" type=\"text/css\"\u003e\n    \u003cscript src=\"DynamicSelect.js\"\u003e\u003c/script\u003e\n    ```\n\n3. Initialize the dynamic select element in your HTML file:\n    ```html\n    \u003cselect id=\"dynamic-select\" name=\"example-select\" data-placeholder=\"Select an option\" data-dynamic-select\u003e\n        \u003coption value=\"1\" data-img=\"path/to/image1.jpg\"\u003eOption 1\u003c/option\u003e\n        \u003coption value=\"2\" data-img=\"path/to/image2.jpg\"\u003eOption 2\u003c/option\u003e\n        \u003coption value=\"3\" data-img=\"path/to/image3.jpg\"\u003eOption 3\u003c/option\u003e\n    \u003c/select\u003e\n    ```\n\n4. **Optional**: Initialize the dynamic select with JavaScript:\n    ```javascript\n    new DynamicSelect('#dynamic-select', {\n        width: '200px',\n        height: '40px',\n        columns: 1,\n        placeholder: 'Select an option',\n        onChange: function(value, text, option) {\n            console.log(value, text, option);\n        }\n    });\n    ```\n\n## Usage\n\n### Basic Example\n\nTo use this dynamic select with images in your project, follow these steps:\n\n1. **Include the necessary HTML structure:**\n    ```html\n    \u003cselect id=\"dynamic-select\"\u003e\n        \u003coption value=\"1\" data-img=\"path/to/image1.jpg\"\u003eOption 1\u003c/option\u003e\n        \u003coption value=\"2\" data-img=\"path/to/image2.jpg\"\u003eOption 2\u003c/option\u003e\n        \u003coption value=\"3\" data-img=\"path/to/image3.jpg\"\u003eOption 3\u003c/option\u003e\n    \u003c/select\u003e\n    ```\n\n2. **Initialize the dynamic select with JavaScript:**\n    ```javascript\n    new DynamicSelect('#dynamic-select', {\n        placeholder: 'Select an option',\n        columns: 1,\n        width: '300px',\n        height: '40px',\n        data: [\n            { value: '1', text: 'Option 1', img: 'path/to/image1.jpg' },\n            { value: '2', text: 'Option 2', img: 'path/to/image2.jpg' },\n            { value: '3', text: 'Option 3', img: 'path/to/image3.jpg' }\n        ],\n        onChange: function(value, text, option) {\n            console.log(value, text, option);\n        }\n    });\n    ```\n\n### Advanced Example with Custom HTML Content\n\nYou can also use custom HTML content for the options:\n\n```html\n\u003cselect id=\"custom-select\"\u003e\n    \u003coption value=\"1\"\u003eOption 1\u003c/option\u003e\n    \u003coption value=\"2\"\u003eOption 2\u003c/option\u003e\n    \u003coption value=\"3\"\u003eOption 3\u003c/option\u003e\n\u003c/select\u003e\n```\n\n```javascript\nnew DynamicSelect('#custom-select', {\n    placeholder: 'Select an option',\n    data: [\n        { value: '1', html: '\u003cimg src=\"path/to/image1.jpg\" alt=\"Option 1\"\u003e\u003cspan\u003eOption 1\u003c/span\u003e' },\n        { value: '2', html: '\u003cimg src=\"path/to/image2.jpg\" alt=\"Option 2\"\u003e\u003cspan\u003eOption 2\u003c/span\u003e' },\n        { value: '3', html: '\u003cimg src=\"path/to/image3.jpg\" alt=\"Option 3\"\u003e\u003cspan\u003eOption 3\u003c/span\u003e' }\n    ],\n    onChange: function(value, text, option) {\n        console.log(value, text, option);\n    }\n});\n```\n\n### Example with Multiple Columns\n\nFor dropdown options to be displayed in multiple columns:\n\n```html\n\u003cselect id=\"multi-column-select\"\u003e\u003c/select\u003e\n```\n\n```javascript\nnew DynamicSelect('#multi-column-select', {\n    columns: 3,\n    height: '100px',\n    width: '160px',\n    dropdownWidth: '400px',\n    placeholder: 'Select a photo',\n    data: [\n        { value: '1', img: 'path/to/image1.jpg', imgWidth: '100px', imgHeight: '80px' },\n        { value: '2', img: 'path/to/image2.jpg', imgWidth: '100px', imgHeight: '80px' },\n        { value: '3', img: 'path/to/image3.jpg', imgWidth: '100px', imgHeight: '80px' },\n        { value: '4', img: 'path/to/image4.jpg', imgWidth: '100px', imgHeight: '80px' },\n        { value: '5', img: 'path/to/image5.jpg', imgWidth: '100px', imgHeight: '80px' },\n        { value: '6', img: 'path/to/image6.jpg', imgWidth: '100px', imgHeight: '80px' }\n    ],\n    onChange: function(value, text, option) {\n        console.log(value, text, option);\n    }\n});\n```\n\nIt is useful if you want to populate images in a grid-like view.\n\n## Configuration\n\nTo customize the dynamic select with images, you can modify the HTML and JavaScript as needed. The following options are available:\n\n- `placeholder`: Placeholder text for the select element.\n- `columns`: Number of columns in the dropdown.\n- `name`: Name attribute for the select element.\n- `width`: Width of the select element.\n- `height`: Height of the select element.\n- `data`: Array of objects representing the select options.\n- `onChange`: Callback function when the selected option changes.\n\nExample configuration:\n```javascript\nnew DynamicSelect('#dynamic-select', {\n    placeholder: 'Select an option',\n    columns: 2,\n    width: '300px',\n    height: '50px',\n    data: [\n        { value: '1', text: 'Option 1', img: 'path/to/image1.jpg' },\n        { value: '2', text: 'Option 2', img: 'path/to/image2.jpg' },\n        { value: '3', text: 'Option 3', img: 'path/to/image3.jpg' }\n    ],\n    onChange: function(value, text, option) {\n        console.log(value, text, option);\n    }\n});\n```\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n## Contact\n\nDavid Adams - [info@codeshack.io](mailto:info@codeshack.io)\n\nGitHub: [https://github.com/codeshackio/dynamic-select-images-js](https://github.com/codeshackio/dynamic-select-images-js)\n\nX (Twitter): [https://twitter.com/codeshackio](https://twitter.com/codeshackio)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeshackio%2Fdynamic-select-images-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeshackio%2Fdynamic-select-images-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeshackio%2Fdynamic-select-images-js/lists"}