Bselect是一个轻量级但健壮的jQuery插件，旨在取代原生的HTML选择框。

该插件从一个选项对象中动态呈现一个高性能、可定制、可搜索、用户友好的下拉列表。所选选项将存储在名为的输入字段中b选择输入.

使用以下选项、方法和事件可以轻松地进行自定义和操作。也支持多选。

select2和selected插件的一个很好的替代方案

如何使用它:

1.导入样式表b选择.css和JavaScriptbselect.js转换为HTML。

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

2.创建一个容器元素来保存下拉选择。

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

3.按如下方式准备数据（选择选项）。

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

4.调用占位符元素上的函数，并使用我的数据对象

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

5.通过覆盖以下选项来自定义下拉列表。

$('#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方法。

// 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.事件处理程序。

$('#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
});

更新日志：

2022-08-04

• 未选择的所有事件

2022-08-03

• 显示所选选项的数量

2021-04-12

• 添加了getSelectedText方法以返回包含索引以外的文本的选定项

2021-03-25

• 修复以程序方式预选和选择值

2021-03-20

• 删除了重复的输入字段
• 修复搜索时删除项目的问题
• 添加了removeItemsButton设置，为下拉列表中的每个项目显示X按钮

2021-03-12

• 针对具有预览属性的大型数据集进行了优化

2021-03-12

• 添加了删除项方法
• 已将显示项目从显示属性更改为可见性属性
• 更改了关闭方法的工作方式，以加快在大量集10k上的渲染+

2020-03-06

• 已修复取消全选问题

2019-12-02

• 速度优化

2019-11-29

• 将removeAll替换为deselectAll

2019-10-22

• 优化的搜索
• 优化的inView选项
• 添加了选定的isDisabled方法

2019-10-21

• 修复了追加和前置时的触发器事件

2019-10-19

• 代码优化，VKuraica添加了固定预选，更新了缩小版
• 添加了选项，如果下拉列表不在视图中，则在选择元素上方呈现下拉列表

2019-10-18

• 添加多个预选值

2019-10-17

• 固定为未选择项目

2019-10-16

• 添加了多个选择框、评论、优化搜索

预览截图

选择框 微型jQuery替换 Bselect