Tiny jQuery Replacement For Select Boxes - Bselect

Bselect is a lightweight yet robust jQuery plugin designed to replace the native HTML select boxes.

The plugin dynamically renders a performant, customizable, searchable, user-friendly dropdown from an object of options. The selected option will be stored in an input field named bselect-input.

Easy to customize and manipulate using the following options, methods and events. Multiple select is supported as well.

A great alternative to the select2 and chosen plugins. 

How to use it:

1. Import the Stylesheet bselect.css and JavaScript bselect.js into the HTML.

<link rel="stylesheet" href="bselect.css" />
<script src="jquery.min.js"></script>
<script src="jquery.bselect.js"></script>

2. Create a container element to hold the dropdown select.

<div id="custom-select"></div>

3. Prepare the data (select options) as follows.

var myData = {
    1 : "Angular", 
    2 : "jQueryScript", 
    3 : "React", 
    4 : "Vue.js"
};

4. Call the function on the placeholder element and populate the dropdown with options defined in the myData object.

$('#custom-select').bselect({
  data : myData
});

5. Customize the dropdown by overriding the following options.

$('#custom-select').bselect({

  // enable/disable live search
  search : true,

  // the width of the dropdown
  width : "200px",

  // custom placeholder text
  defaultText : "Select me",

  // additional CSS classes
  className : "",

  // input name
  inputName : "bselect-input",

  // selected index on init
  selected : 0,

  // open the dropdown on init
  opened : false,

  // close the dropdown after an options is selected
  closeOnSelect : true,

  // render dropdown list above the select element if dropdown will not be in view
  checkInView : true,

  // enable multiple select
  multiple : false,

  // close on select
  closeOnSelect : true,

  // enable/disable ellipsis
  elipsis : true,

  // in ms
  focusDelay : 100,

  // in ms
  doneTypingInterval : 180,

  //Display X button next to every item in drop down list
  removeItemsButton : false, 

  // How many items will be previewd in a dropdown
  preview : 150,

  // Show number of selected options
  selectedCount: false,

});

6. API methods.

// open the dropdown
$('#custom-select').bselect("open");

// close the dropdown
$('#custom-select').bselect("close");

// toggle the dropdown
$('#custom-select').bselect("toggle");

// select an option by ID
$('#custom-select').bselect("selectById", 2);

// get the selected option
$('#custom-select').bselect("getSelected");

// append a new option
$('#custom-select').bselect("append", 4, "HTML5");

// prepend an option
$('#custom-select').bselect("prepend", 5, "CSS3");

// remove an item
$('#custom-select').bselect("remove", 3);

// disable click on item
$('#custom-select').bselect("disable", 3);

// get disabled
$('#select-box').bselect("getDisabled");

// disable all elements
$('#select-box').bselect("disableAll");

// disable an option
$('#select-box').bselect("disabled", 8);

// enable an option
$('#select-box').bselect("enable", 8);

// enable all options
$('#select-box').bselect("enableAll");

// is selected option
$('#select-box').bselect("selected", 8);

// select all
$('#select-box').bselect("selectAll");

// get selected text (will return multiple values in csv format when multiple mode is enabled)
$('#select-box').bselect("getSelectedText");

// deselect all
$('#select-box').bselect("deselectAll");

// deselect item 
$('#select-box').bselect("deselect", 8);

7. Event handlers.

$('#custom-select').on('open.bselect', function(e,params){
  // on open
});

$('#custom-select').on('opened.bselect', function(e,params){
  // after open
});

$('#custom-select').on('close.bselect', function(e,params){
  // on close
});

$('#custom-select').on('closed.bselect', function(e,params){
  // after close
});

$('#custom-select').on('toggle.bselect', function(e,params){
  // on toggle
});

$('#custom-select').on('toggled.bselect', function(e,params){
  // after toggle
});

$('#custom-select').on('select.bselect', function(e,params){
  // start selecting options
});

$('#custom-select').on('selected.bselect', function(e,params){
  // after an item selected
});

$('#custom-select').on('updated.bselect', function(e,params){
  // after the dropdown is updated
});

$('#custom-select').on('unselected.bselect', function(e,params){
  // after an item is unselected
});

$('#custom-select').on('unselectedAll.bselect', function(e,params){
  // after all items are unselcted
});

Changelog:

2022-08-04

• unselectedall event

2022-08-03

• show number of selected options

2021-04-12

• Added getSelectedText method to return selected items containing text insted of index

2021-03-25

• Fix for preselected and selecting values programatically

2021-03-20

• Removed duplicate input field
• Fix for remove item when search
• Added removeItemsButton setting to display X button for every item in dropdown list

2021-03-12

• Optimized for large data sets with preview attribute

2021-03-12

• Added remove item method
• Changed displaying items from display to visibility property
• Changed how does close method works to speed up rendering on large amount of sets 10k+

2020-03-06

• fix for deselectAll

2019-12-02

• Speed optimization

2019-11-29

• replaced removeAll with deselectAll

2019-10-22

• Optimized search
• Optimized inView option
• Added selected, isDisabled methods

2019-10-21

• Fix for trigger event on append and prepend

2019-10-19

• Code optimized, fixed preselect added by VKuraica, minified version updated
• Added option to render dropdown list above the select element if dropdown will not be in view

2019-10-18

• Add multiple pre selected values

2019-10-17

• Fixed for none selected items

2019-10-16

• Multiple selextbox added, comments, optimized search

---

This awesome jQuery plugin is developed by losmicar. For more Advanced Usages, please check the demo page or visit the official website.