An alternative to the Chozen Select Boxes Jquery Plugin | BSelect

Bselect is a jQuery plugin that builds a custom HTML checkbox with search and inputs the specified value in the hidden input field for further use. BSelect works perfectly with 10k + options (items) without any lag.

The plugin dynamically displays a high-performance, customizable, searchable, and easy-to-use drop-down menu of an object of options. The selected option will be stored in an input field called bselect-input. Ease of customization and manipulation using the following options, methods, and events. Multiple selections are also supported.

Tiny jQuery Replacement For Select Boxes, Bselect – jQuery Select Plugin/Github, select box plugin jquery, jquery form skin plugin, dropdown select box plugin

How to make use of 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 aspect to carry the dropdown choose.

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

3. Prepare the info as follows.

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

4. Call the function on the placeholder aspect and populate the dropdown with choices outlined within the myData object.

  data : myData

5. Customize the dropdown by overriding the next choices.


  // 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,

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


6. API strategies.

// open the dropdown

// close the dropdown

// toggle the dropdown

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

// get the selected option

// 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

// disable all elements

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

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

// enable all options

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

// select all

// deselect all

// 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

jquery select box, jquery combobox dropdown list, multi select boxes pillbox, dropdown tree select jquery, jquery picklist

See Demo And Download

Official Website(losmicar): Click Here

This superior jQuery/javascript plugin is developed by losmicar. For extra Advanced Usages, please go to the official website.

Leave a Comment