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

javascript跨浏览器多选组件 - Iconic Multiselect
栏目分类:表单   发布日期:2021-09-13   浏览次数:

一个易于使用、易于配置和跨浏览器的多选组件,构建在 Vanilla JavaScript 之上。适用于本机 HTML 选择框。

它将选定的选项转换为“筹码”(也称为令牌),可以通过单击“X”来删除这些筹码。

使用:

1. 将 Iconic Multiselect 的 JavaScript 插入到文档中。

<!-- 使用 IE 11 Polyfills -->
<script src="multi-select-ie11-polyfills.min.js"></script>
<!-- 没有 IE 11 Polyfills -->
<script src="multi-select.min.js"></script>

2. 创建一个新的 Iconic Multiselect 实例。

<select id="example">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  ...
</select>
var multiSelect = new IconicMultiSelect({
    select: "#example",
})

3. 初始化 Iconic Multiselect 并完成。

multiSelect.init();

4. 您还可以在对象数组中定义选项,如下所示:

var multiSelect = new IconicMultiSelect({
    data: [ 
      { id: 1, item: 'Option 1'}, 
      { id: 2, item: 'Option 2'}, 
      { id: 3, item: 'Option 3'}
    ],
    textField: 'item',
    valueField: 'id',
})

5. 更多配置。

var multiSelect = new IconicMultiSelect({
    // 占位符文本
    placeholder: "Select... ",
    // 没有数据时显示的消息
    noData: "No data found. ",
    // 没有结果时显示的消息
    noResults: "No results found.",
})

6. 聆听选项更改。

multiSelect.subscribe(function(e) { 
  console.log(e); 
});

7、判断是否在<head>标签中注入CSS。默认值:假。

var multiSelect = new IconicMultiSelect({ 
    customCss: true, 
})

8. 自定义标签和项目模板。

var multiSelect = new IconicMultiSelect({ 
    tagTemplate: null, 
    itemTemplate: null, 
})

官方网站:https://github.com/sidneywm/iconic-multiselect

相关热词: 多选

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