Skip to content

Commit 4c85a14

Browse files
codeshackiocodeshackio
authored
Update README.md
1 parent a468422 commit 4c85a14

File tree

1 file changed

+182
-2
lines changed

1 file changed

+182
-2
lines changed

‎README.md

Lines changed: 182 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,182 @@
1-
# dynamic-select-images-js
2-
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.
1+
# Dynamic Select with Images
2+
3+
A 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.
4+
5+
The complete guide and reference is available here: [https://codeshack.io/multi-select-dropdown-html-javascript/](https://codeshack.io/dynamic-select-images-html-javascript/)
6+
7+
## Features
8+
9+
- Dynamic select dropdown with images
10+
- Customizable placeholder text
11+
- Multiple columns for dropdown options
12+
- Custom HTML content for options
13+
- Easy integration with existing forms
14+
- Lightweight and fast
15+
16+
## Screenshot
17+
18+
![Screenshot of Multi Select Dropdown](assets/screenshot.png)
19+
20+
## Quick Start
21+
22+
1. Download the latest stable version from the releases section.
23+
24+
2. Include the necessary CSS and JavaScript files in your project:
25+
```html
26+
<link href="DynamicSelect.css" rel="stylesheet" type="text/css">
27+
<script src="DynamicSelect.js"></script>
28+
```
29+
30+
3. Initialize the dynamic select element in your HTML file:
31+
```html
32+
<select id="dynamic-select" name="example-select" data-placeholder="Select an option" data-dynamic-select>
33+
<option value="1" data-img="path/to/image1.jpg">Option 1</option>
34+
<option value="2" data-img="path/to/image2.jpg">Option 2</option>
35+
<option value="3" data-img="path/to/image3.jpg">Option 3</option>
36+
</select>
37+
```
38+
39+
4. **Optional**: Initialize the dynamic select with JavaScript:
40+
```javascript
41+
new DynamicSelect('#dynamic-select', {
42+
width: '200px',
43+
height: '40px',
44+
columns: 1,
45+
placeholder: 'Select an option',
46+
onChange: function(value, text, option) {
47+
console.log(value, text, option);
48+
}
49+
});
50+
```
51+
52+
## Usage
53+
54+
### Basic Example
55+
56+
To use this dynamic select with images in your project, follow these steps:
57+
58+
1. **Include the necessary HTML structure:**
59+
```html
60+
<select id="dynamic-select">
61+
<option value="1" data-img="path/to/image1.jpg">Option 1</option>
62+
<option value="2" data-img="path/to/image2.jpg">Option 2</option>
63+
<option value="3" data-img="path/to/image3.jpg">Option 3</option>
64+
</select>
65+
```
66+
67+
2. **Initialize the dynamic select with JavaScript:**
68+
```javascript
69+
new DynamicSelect('#dynamic-select', {
70+
placeholder: 'Select an option',
71+
columns: 1,
72+
width: '300px',
73+
height: '40px',
74+
data: [
75+
{ value: '1', text: 'Option 1', img: 'path/to/image1.jpg' },
76+
{ value: '2', text: 'Option 2', img: 'path/to/image2.jpg' },
77+
{ value: '3', text: 'Option 3', img: 'path/to/image3.jpg' }
78+
],
79+
onChange: function(value, text, option) {
80+
console.log(value, text, option);
81+
}
82+
});
83+
```
84+
85+
### Advanced Example with Custom HTML Content
86+
87+
You can also use custom HTML content for the options:
88+
89+
```html
90+
<select id="custom-select">
91+
<option value="1">Option 1</option>
92+
<option value="2">Option 2</option>
93+
<option value="3">Option 3</option>
94+
</select>
95+
```
96+
97+
```javascript
98+
new DynamicSelect('#custom-select', {
99+
placeholder: 'Select an option',
100+
data: [
101+
{ value: '1', html: '<img src="path/to/image1.jpg" alt="Option 1"><span>Option 1</span>' },
102+
{ value: '2', html: '<img src="path/to/image2.jpg" alt="Option 2"><span>Option 2</span>' },
103+
{ value: '3', html: '<img src="path/to/image3.jpg" alt="Option 3"><span>Option 3</span>' }
104+
],
105+
onChange: function(value, text, option) {
106+
console.log(value, text, option);
107+
}
108+
});
109+
```
110+
111+
### Example with Multiple Columns
112+
113+
For dropdown options to be displayed in multiple columns:
114+
115+
```html
116+
<select id="multi-column-select"></select>
117+
```
118+
119+
```javascript
120+
new DynamicSelect('#multi-column-select', {
121+
columns: 3,
122+
height: '100px',
123+
width: '160px',
124+
dropdownWidth: '400px',
125+
placeholder: 'Select a photo',
126+
data: [
127+
{ value: '1', img: 'path/to/image1.jpg', imgWidth: '100px', imgHeight: '80px' },
128+
{ value: '2', img: 'path/to/image2.jpg', imgWidth: '100px', imgHeight: '80px' },
129+
{ value: '3', img: 'path/to/image3.jpg', imgWidth: '100px', imgHeight: '80px' },
130+
{ value: '4', img: 'path/to/image4.jpg', imgWidth: '100px', imgHeight: '80px' },
131+
{ value: '5', img: 'path/to/image5.jpg', imgWidth: '100px', imgHeight: '80px' },
132+
{ value: '6', img: 'path/to/image6.jpg', imgWidth: '100px', imgHeight: '80px' }
133+
],
134+
onChange: function(value, text, option) {
135+
console.log(value, text, option);
136+
}
137+
});
138+
```
139+
140+
It is useful if you want to populate images in a grid-like view.
141+
142+
## Configuration
143+
144+
To customize the dynamic select with images, you can modify the HTML and JavaScript as needed. The following options are available:
145+
146+
- `placeholder`: Placeholder text for the select element.
147+
- `columns`: Number of columns in the dropdown.
148+
- `name`: Name attribute for the select element.
149+
- `width`: Width of the select element.
150+
- `height`: Height of the select element.
151+
- `data`: Array of objects representing the select options.
152+
- `onChange`: Callback function when the selected option changes.
153+
154+
Example configuration:
155+
```javascript
156+
new DynamicSelect('#dynamic-select', {
157+
placeholder: 'Select an option',
158+
columns: 2,
159+
width: '300px',
160+
height: '50px',
161+
data: [
162+
{ value: '1', text: 'Option 1', img: 'path/to/image1.jpg' },
163+
{ value: '2', text: 'Option 2', img: 'path/to/image2.jpg' },
164+
{ value: '3', text: 'Option 3', img: 'path/to/image3.jpg' }
165+
],
166+
onChange: function(value, text, option) {
167+
console.log(value, text, option);
168+
}
169+
});
170+
```
171+
172+
## License
173+
174+
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
175+
176+
## Contact
177+
178+
David Adams - [info@codeshack.io](mailto:info@codeshack.io)
179+
180+
GitHub: [https://github.com/codeshackio/dynamic-select-images-js](https://github.com/codeshackio/dynamic-select-images-js)
181+
182+
X (Twitter): [https://twitter.com/codeshackio](https://twitter.com/codeshackio)

0 commit comments

Comments
 (0)