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

Must Read – Optimized for Bootstrap 5 Dropdown Select Box | dselect

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: {}
});

Must Read – Converts Select Multiple Items Into Dropdown Lists With Checkboxes

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)

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