易于搜索 多选jQuery插件 MultiPick.js

  • 源码大小:11.42KB
  • 所需积分:1积分
  • 源码编号:19JP-3366
  • 浏览次数:455次
  • 最后更新:2023年06月05日
  • 所属栏目:表单
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

MultiPick.js是一个易于使用的多选jQuery插件,允许用户从预定义的选项列表中选择一个或多个项目。

它适用于本地人<选择>元素,并且很容易使用自己的CSS进行样式设置。

更多功能:

  • 允许您指定可以选择的最大选项数。
  • 允许您为每个选项指定一个图像。
  • 允许您按搜索框筛选选项。
  • 将所选选项显示为标记/令牌。

如何使用它:

1.在页面上包含multipick.js插件的文件。

  1. <link rel="stylesheet" href="/path/to/multiPick.css" />
  2. <script src="/path/to/cdn/jquery.min.js"></script>
  3. <script src="/path/to/multiPick.js"></script>

2.使用数据img属性:

  1. <select id="multiPick">
  2. <option value="0" data-img="1.jpg">Option 0</option>
  3. <option value="1" data-img="2.jpg">Option 1</option>
  4. <option value="2" data-img="3.jpg">Option 2</option>
  5. ...
  6. </select>

3.调用函数多重拾取选择元素和插件将处理其余部分:

  1. $('#multiPick').multiPick({
  2. // options here
  3. });

4.可用的插件选项。

  1. $('#multiPick').multiPick({
  2.  
  3. // max number of options
  4. limit: 2,
  5.  
  6. // enable images
  7. image: false,
  8.  
  9. // close the select after selection
  10. closeAfterSelect: true,
  11.  
  12. // enable search field
  13. search: false,
  14.  
  15. // placeholder text
  16. placeholder: 'Select',
  17.  
  18. // slim layout
  19. slim: false,
  20. });

5.获取所选选项。

  1. let values = $('#multiPick').getMultiPick();

预览截图