当前位置:主页 > JavsScript库 > 表单 >

自定义单项选择或多项选择 - vanillaSelectBox
栏目分类:表单   发布日期:2021-08-30   浏览次数:

一个 Vanilla JavaScript 库,可将常规 select 元素转换为可定制、可搜索、可检查的下拉列表。

使用:

1. 首先,在页面上包含 JavaScriptvanillaSelectBox.js和样式表vanillaSelectBox.css。

<link rel="stylesheet" href="./vanillaSelectBox.css">
<script src="./vanillaSelectBox.js"></script>

2. 在 HTML 选择上调用函数 vanillaSelectBox 并完成。

<!-- 单选 -->
<select id="example">
  ... 这里的选项 ...
</select>
 
<!-- 多选 -->
<select id="example" multiple size="3">
  ... 这里的选项 ...
</select>
let mySelect = new vanillaSelectBox("#example");

3. 设置下拉列表的最大高度/宽度。

let mySelect = new vanillaSelectBox("#example",{
    maxWidth: 500,
    maxHeight: 400,
    minWidth: -1
});

4. 允许用户通过搜索字段过滤选项。默认值:false。

let mySelect = new vanillaSelectBox("#example",{
    search: true
});

自定义占位符文本。默认值:empty。

let mySelect = new vanillaSelectBox("#example",{
    placeHolder: "custom text here"
});

5. 本地化下拉列表。

let mySelect = new vanillaSelectBox("#example",{
    translations: { 
      "all": "All", 
      "items": "items"
    }
});

6. 使多选保持打开状态。默认值:false。

let mySelect = new vanillaSelectBox("#example",{
    stayOpen: true
});

7. 确定是否禁用全选功能。默认值:false。

let mySelect = new vanillaSelectBox("#example",{
    disableSelectAll: true
});

8. 设置多选菜单中可选选项的最大数量。默认值:4

let mySelect = new vanillaSelectBox("#example",{
    maxSelect: 3
});

9. 设置每个选项的最大宽度(以像素为单位)。

let mySelect = new vanillaSelectBox("#example",{
    maxOptionWidth: 80
});

10. 启用/禁用下拉列表。

mySelect.enable();
mySelect.disable();

11. 选择特定选项。

// 单选
mySelect.setValue(option1);
 
// 多选
mySelect.setValue([option1, option2, option3, ...]);
 
// 全选
mySelect.setValue('all');

12. 清除选择。

mySelect.empty();

13. 摧毁图书馆。

mySelect.destroy();

14.启用/禁用元素

mySelect.enableItems([] || '') => 值数组或逗号分隔列表
mySelect.disableItems([] || '') => 值数组或逗号分隔列表


官方网站:https://github.com/PhilippeMarcMeyer/vanillaSelectBox

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库