vSelect是一个轻量级的自定义选择jQuery插件，它通过可定制、用户友好的下拉菜单重新设计了本地选择框，以获得更好的导航/浏览体验。

主要功能：

• 多选选项的复选框。

• 选中全部复选框，只需单击即可选择所有选项。

• 可伸缩＜选择组＞选项组。

参见：

• 替换Native Select Box的10个最佳下拉插件

如何使用它:

1.下载并导入vSelect插件的文件。

// JavaScript
import "pfkl-select/vselect/vselect.min.js";
 
// Stylesheet
@import "~pfkl-vselect/vselect/vselect";

<!-- OR -->
<link rel="stylesheet" href="vselect/vselect.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="vselect/vselect.js"></script>

2.只需调用函数v选择在您的选择元素，插件将完成其余工作。

<select name="food" id="example" multiple>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="celery">Celery</option>
    <option value="cucumber">Cucumber</option>
  </optgroup>
  <optgroup label="Meat">
    <option value="beef">Beef</option>
    <option value="chicken">Chicken</option>
    <option value="fish">Fish</option>
  </optgroup>
</select>

$('#example').vSelect({
  // options here
});

3.用于自定义下拉选择的可用选项。

$('#example').vSelect({
 
  // allows multiselect
  multiSelect: true,
 
  // custom placeholder
  placeholder: 'Please select',
 
  // enable Check All checkbox
  checkAll: true,
  checkAllLabel: 'All',
 
  // expand all option groups on load
  expanded: true,
 
  // or "values"
  display: 'sum',
 
  // height of the dropdown
  trayHeight: '240px',
 
  // false = make the dropdown inline block
  dropdown: true,
  
});

4.每次选项更改时都会触发一个函数。

$('#example').vSelect({
  onChange: function(values, options) {
    console.log(values)
  }
});