https://github.com/bmsvieira/bvselect-vanillajs
BVSelect - Vanilla Javascript Fully Customizable SelectBox
https://github.com/bmsvieira/bvselect-vanillajs
customizable javascript javascript-es6 nojquery opensource purejavascript selectbox vanilla-javascript vanillajs
Last synced: about 1 year ago
JSON representation
BVSelect - Vanilla Javascript Fully Customizable SelectBox
- Host: GitHub
- URL: https://github.com/bmsvieira/bvselect-vanillajs
- Owner: BMSVieira
- License: mit
- Created: 2020-05-24T01:16:28.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-10-15T08:55:37.000Z (over 4 years ago)
- Last Synced: 2025-03-28T02:53:25.647Z (about 1 year ago)
- Topics: customizable, javascript, javascript-es6, nojquery, opensource, purejavascript, selectbox, vanilla-javascript, vanillajs
- Language: JavaScript
- Homepage:
- Size: 813 KB
- Stars: 120
- Watchers: 2
- Forks: 18
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
BVSelect - Vanilla JS
--
Replaces native select elements with fully customizable dropdowns.
Demo:
-
https://bmsvieira.github.io/BVSelect-VanillaJS/
Features:
-
- 🔧 Fully Customizable
- 💪 No Dependencies, built with VanillaJS
- 🌎 Tested in All Modern Browsers
- 😎 Images & FontIcons
- ⌨️ Mobile Optimization & Normal Usage
- 🔎 Built-in Searchbox
- 🖥 Prevented Viewport Overflow
Installation:
-
1 - Include JavaScript Source.
```javascript
```
2 - Include Styles.
```javascript
```
4 - Set HTML.
```javascript
Select Option
Option 1
Option 2
Option 3
Option 4
```
3 - Initilize.
```javascript
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new BVSelect({
selector: "#selectbox",
width: "100%",
searchbox: true,
offset: true,
placeholder: "Select Option",
search_placeholder: "Search...",
search_autofocus: true,
breakpoint: 450
});
});
```
Polyfill:
-
BVSelect uses ES6 which isn't supported in all browsers yet (especially older browsers). Some features will need to be polyfilled to be available. Use the following sources instead:
```javascript
// Polyfill Source
// BVSelect Polyfilled Version
```
Methods:
-
Destroy:
Removes dropdown, unbinds all its events and brings back the original Select.
```javascript
demo1.Destroy();
```
Update:
Updates current dropdown based on changes to the original selectbox.
```javascript
demo1.Update();
```
Get ID:
Returns the ID that was generated to build dropdown, so you can add custom classes.
```javascript
demo1.GetID();
```
Set Option:
Set new selected option.
| Name | Value | Description |
| --- | --- | --- |
| `type` | `byIndex` or `byValue` | Parameter |
| `value` | `string` | Value to search |
```javascript
demo1.SetOption({
type: "byIndex",
value: "1"
});
```
Change:
Changes dropdown's settings
| Name | Value | Description |
| --- | --- | --- |
| `placeholder` | `string` | Modify dropdown's placeholder |
| `search_placeholder` | `string` | Modify input's placelholder |
| `options` | `object` | Replaces all options in the original selectbox |
```javascript
demo1.Change({
placeholder: "New Placeholder",
search_placeholder: "New Searchbox's Placeholder",
options : {
0: {
inner_text: 'Metallica',
value: "met",
disabled: false,
separator: false,
img: "https://img.icons8.com/color/2x/usa.png",
icon: "fa fa-hashtag"
},
1: {
inner_text: 'Megadeth',
value: "meg",
disabled: false,
separator: false,
img: false,
icon: "fa fa-tshirt"
},
2: {
inner_text: 'Slayer',
value: "sla",
disabled: false,
separator: false,
img: false,
icon: "fa fa-hashtag"
}
}
});
// Update Dropdown based on changes to the original selectbox
demo1.Update();
```
Append Option:
Add new options to existing selectbox
| Name | Value | Description |
| --- | --- | --- |
| `position` | `afterbegin` or `beforeend` | Add new options at beginning or ending of the dropdown |
| `options` | `object` | Options to add to original selectbox |
```javascript
demo1.AppendOption({
position: "beforeend",
options : {
0: {
inner_text: 'Metallica',
value: "met",
disabled: false,
separator: false,
img: "https://img.icons8.com/color/2x/usa.png",
icon: "fa fa-hashtag"
},
1: {
inner_text: 'Megadeth',
value: "meg",
disabled: false,
separator: false,
img: false,
icon: "fa fa-tshirt"
}
}
});
// Update Dropdown based on changes to the original selectbox
demo1.Update();
```
Settings:
-
| Name | Value | Default | Description |
| --- | --- | --- | --- |
| `selector` | `ID` | `---` | Specify ID of the element|
| `width` | `px` or `%` | `100%` | Specify the width of the main element|
| `searchbox` | `boolean` | `false` | Add a search box to the list |
| `offset` | `boolean` | `true` | Fixes Viewport Offset |
| `placeholder` | `string` | `Select Option` | Modify dropdown's placeholder |
| `search_placeholder` | `string` | `Search...` | Modify input's placelholder |
| `search_autofocus` | `boolean` | `false` | Automatically focus on search input if enabled |
| `breakpoint` | `integer` | `600` | Defines the responsive breakpoint (in px) |
```javascript
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new BVSelect({
selector: "#selectbox",
searchbox: true,
offset: true
});
});
```
Attributes:
-
| Name | Value | Description |
| --- | --- | --- |
| `data-separator` | `boolean` | Highlights an option |
| `data-img` | `Image Source` | Adds an Image to option |
| `data-icon` | `fa fa-hashtag` | Adds an FontIcon to option, can be used any provider as long it is identical. Images will be prioritized over icons. |
| `disabled (native)` | `disabled` | Disables an option |
*To add FontIcons, you must include it's own sources*
```html
Select Option
Cristiano Ronaldo
Lionel Messi
Neymar Jr. (Disabled)
Ronaldinho
Luis Figo
```
*All CSS styles are fully customizable in order to match your style*
Appearance
-
This was built to fit any style and to be 100% fully customizable, so you are able to change everything in the css file.
