BVSelect is the Vanilla JavaScript version of the jQuery plugin that turns the original select element into an animated, customizable, mobile-friendly dropdown menu.
BVSelect Features:
- Fully customizable
- No dependencies, built with VanillaJS
- Tested in all modern browsers
- Pictures and FontIcons
- Optimize phone and normal use
- Built-in search box
- Viewport overrun is forbidden
How to make use of it:
1. Load the BVSelect Plugin’s JavaScript and Stylesheet.
<link rel="stylesheet" href="css/bvselect.css" /> <script src="js/bvselect.js"></script>
2. Attach the function BVSelect to the <select />
component and the plugin will do the remaining.
<select id="selectbox"> <option data-separator="true" value="">Select...</option> <option value="jquery" selected>jQuery</option> <option value="javascript">JavaScript</option> <option value="angular" disabled>Angular</option> <option value="react">React</option> <option value="vue">Vue.js</option> </select>
var mySelect = new BVSelect({ selector: "#selectbox" });
3. Add a search field to the dropdown.
var mySelect = new BVSelect({ selector: "#selectbox", searchbox: true });
4. Specify the width of the dropdown.
var mySelect = new BVSelect({ selector: "#selectbox", width: '300px' });
5. Add pictures to the start of the choices.
<select id="selectbox"> <option value="">Select...</option> <option data-img="jquery.png" value="jquery" selected>jQuery</option> <option data-img="javascript.png" value="javascript">JavaScript</option> ... </select>
6. Add icons (font superior on this example) to the start of the choices.
<select id="selectbox"> <option data-separator="true" value="" selected>Select...</option> <option data-icon="fa fa-profile" value="jquery" selected>jQuery</option> <option data-icon="fa fa-home" value="javascript">JavaScript</option> ... </select>
7. Make the dropdown all the time be visible on the display screen.
var mySelect = new BVSelect({ selector: "#selectbox", offset: true });
8. Open the dropdown in a modal popup when working on the mobile.
var mySelect = new BVSelect({ selector: "#selectbox", breakpoint: 450 });
9. Customize the placeholder text.
var mySelect = new BVSelect({ selector: "#selectbox", placeholder: "Select Option", search_placeholder: "Search..." });
10. Change the choices of the dropdown.
mySelect.Change({ placeholder: "New Placeholder", search_placeholder: "New Searchbox's Placeholder", options : { 0: { inner_text: 'Option 1', value: "1", disabled: false, separator: false, img: "1.png", icon: "fa fa-home" }, 1: { inner_text: 'Option 2', value: "2", disabled: false, separator: false, img: "2.png", icon: "fa fa-home" }, // ... } }); // apply the change to the dropdown mySelect.Update();
11. More API strategies.
// destroy the dropdown mySelect.Destroy(); // get ID mySelect.GetID(); // change settings mySelect.Change({ placeholder: '', search_placeholder: '', options: {} }); // append options mySelect.AppendOption({ position: '', options: {} });
Custom Dropdown Select Box, Custom Dropdowns Select Boxes, BVSelect Vanilla JS Plugin/Github
See Demo And Download
Official Website(BMSVieira): Click Here
This superior jQuery/javascript plugin is developed by BMSVieira. For extra Advanced Usages, please go to the official website.
Be First to Comment