Fully Customizable SelectBox in Vanilla Javascript | BVSelect

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:

NameValueDefaultDescription
selectorID---Specify ID of the element
widthpx or %100%Specify the width of the main element
searchboxbooleanfalseAdd a search box to the list
offsetbooleantrueFixes Viewport Offset
placeholderstringSelect OptionModify dropdown’s placeholder
search_placeholderstringSearch...Modify input’s placelholder
search_autofocusbooleanfalseAutomatically focus on search input if enabled
breakpointinteger600Defines the responsive breakpoint (in px)

Attributes:

NameValueDescription
data-separatorbooleanHighlights an option
data-imgImage SourceAdds an Image to option
data-iconfa fa-hashtagAdds an FontIcon to option, can be used any provider as long it is identical. Images will be prioritized over icons.
disabled (native)disabledDisables an option

Custom Dropdown Select Box, Custom Dropdowns Select Boxes, BVSelect Vanilla JS Plugin/Github

Read More – 

Multiple Easy Select Combo Box with Checkboxes | MSFmultiSelect
jQuery Plugin Allows Multiple Selections of Checkbox Inputs


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.

Share