Author: | BMSVieira |
---|---|
Views Total: | 3,187 views |
Official Page: | Go to website |
Last Update: | June 28, 2021 |
License: | MIT |
Preview:

Description:
This is the vanilla JavaScript version of the jQuery bvselect plugin that transforms the native <select />
element into an animated, customizable, mobile-friendly dropdown.
Features:
- Filterable & Searchable.
- Auto repositions the dropdown to make it always be visible on the screen.
- Auto converts the dropdown into a modal picker on mobile devices.
- Multiple Select.
How to use 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 />
element and the plugin will do the rest.
<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. Default: ‘100%’.
var mySelect = new BVSelect({ selector: "#selectbox", width: '300px' });
5. Add images to the beginning of the options.
<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 awesome in this example) to the beginning of the options.
<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 always be visible on the screen.
var mySelect = new BVSelect({ selector: "#selectbox", offset: true });
8. Open the dropdown in a modal popup when running 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 options 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 methods.
// destroy the dropdown mySelect.Destroy(); // get ID mySelect.GetID(); // change settings mySelect.Change({ placeholder: '', search_placeholder: '', options: {} }); // append options mySelect.AppendOption({ position: '', options: {} });
Changelog:
06/28/2021
- v1.4
what if i need to create multiple select dropdowns. Do i have to repeat this code
var mySelect = new BVSelect({
selector: “#selectbox”
});
for every select dropdown i use?
yes by each id#.. select..
hey dude . how i can add onchange event on it??
how i can use event onchange on my select code?