BVSelect - VanillaJS Fully Customizable SelectBoxes
source link: https://github.com/BMSVieira/BVSelect-VanillaJS
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
BVSelect - Vanilla JS
Replaces native select elements with fully customizable dropdowns.
Even though this replaces native select options, you can still use Form Submit , Onchange Events and Attributes as you would with normal usage.
Demo:
https://bmsvieira.github.io/BVSelect-VanillaJS/
JQuery Version:
https://github.com/BMSVieira/BVSelect
Features:
- :wrench: Fully Customizable
- :muscle: No Dependencies, built with VanillaJS
- :earth_americas: Tested in All Modern Browsers (IE11 not Included)
- :sunglasses: Images & FontIcons
- ⌨️ Normal Usage (Multiple Selection included)
- :mag_right: Built-in Searchbox
- Prevented Viewport Overflow
Installation:
1 - Include JavaScript Source.
<script src="path/to/bvselect.js"></script>
2 - Include Styles.
<link rel="stylesheet" href="path/to/bvselect.css">
4 - Set HTML.
<select id="selectbox"> <option data-separator="true"> Select Option </option> <option value="1"> Option 1 </option> <option value="2"> Option 2 </option> <option value="3" disabled> Option 3 </option> <option value="4"> Option 4 </option> </select>
3 - Initilize.
document.addEventListener("DOMContentLoaded", function() { var demo1 = new BVSelect({ selector: "#selectbox", searchbox: true, offset: true }); });
Methods:
Destroy:
demo1.Destroy();
Removes dropdown, unbinds all its events and brings back the original Select
Update:
demo1.Update();
Updates current dropdown based on changes to the original selectbox.
Get ID:
demo1.GetID();
Returns the ID that was generated to build dropdown, so you can add custom classes.
Settings:
Name Value Default Descriptionwidth
px
or %
100%
Specify the width of the main element
searchbox
true
or false
false
Add a search box to the list
offset
true
or false
true
Fixes Viewport Offset
Example:
document.addEventListener("DOMContentLoaded", function() { var demo1 = new BVSelect({ selector: "#selectbox", searchbox: true, offset: true }); });
Attributes:
Name Value Descriptiondata-separator
true
or false
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
Example:
<select id="selectbox"> <option value="##" data-separator="true" selected>Select Option</option> <option data-img="path/to/img.png" value="--">Cristiano Ronaldo</option> <option data-icon="fa fa-hashtag" value="--" >Lionel Messi </option> <option data-img="path/to/img.png" value="--" disabled>Neymar Jr. (Disabled)</option> <option data-img="path/to/img.png" value="--">Ronaldinho</option> <option data-img="path/to/img.png" value="--">Luis Figo</option> </select>
All CSS styles are fully customizable in order to match your style
Frequently Asked Questions
Is there any themes?
It doesn't need themes since the CSS is fully customizable, you are able to change everything to match your style.
In addition to design, what changes?
Replaces the original SelectBox but you can use it as you would with a native one, OnChange Events, Attributes, Form Submit, Append/Remove Options, everything.
What about Browser Compatibility?
It was tested successfully in every modern browser (IE11 not Included)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK