Custom Dropdown Select Box In Vanilla JavaScript – bvselect

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