Fully Customizable SelectBox in Vanilla Javascript

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