jQuery选择插件增强本机选择框

  • 源码大小:12.57KB
  • 所需积分:1积分
  • 源码编号:19JP-3050
  • 浏览次数:850次
  • 最后更新:2023年04月30日
  • 所属栏目:表单
本站默认解压密码:19jp.com 或 19jp_com

简介

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)
  }
});