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

带有复选框的简易多选组合框 – MSFmultiSelect
栏目分类:表单   发布日期:2021-09-01   浏览次数:

MSFmultiSelect JavaScript 库将常规选择元素转换为高级用户友好的多选组合框。

单击该框以从包含带有复选框的选项列表的弹出窗口中选择多个项目。

还提供了一个 Check All 选项,允许您通过单击选择所有选项。

使用:

1. 添加对 MSFmultiSelect 的 JavaScript 和样式表的引用。

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

2. 将选择框包装到容器元素中。

<div id="example">
  <select id="multiselect"  class="form-control" name="languages[]" multiple="multiple">
    <option value="1" selected>JavaScript</option>
    <option value="2">CSS</option>
    <option value="3" selected>HTML</option>
    <option value="4">Ruby</option>
    <option value="5">Go</option>
    <option value="6">PHP</option>
    <option value="7">ASP.Net</option>
    <option value="8">Java</option>         
  </select>
</div>

3. 初始化顶部容器上的库并完成。

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      appendTo: '#example',
      // options here
    }
);

4. 确定是否启用“全部检查”功能。

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      selectAll: true
    }
);

5. 指定多选组合框的高度/宽度。

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      width:350,
      height:30
    }
);

6. 向多选组合框添加额外的 CSS 类。

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      className: ''
    }
);

7. 确定是否启用只读模式。

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      readOnly: true
    }
);

8. 更改选项时执行功能。

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      onChange:function(checked,value,instance){
        console.log(checked,value,instance);
      }
    }
);

9. 确定是否启用实时搜索功能。

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      searchBox: true
    }
);

10. 确定您要使用的主题。

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      theme: 'theme1' // 或 'theme2' (tags 输入)
    }
);

11. 设置占位符。

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      placeholder: ''
    }
);

12. 事件处理程序。

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      onChange:function(checked, value, instance) {
        console.log(checked, value, instance);
      },
      afterSelectAll: function(checked, values, instance) {
        console.log(checked, values, instance);
      },
    }
);

13. 以编程方式控制多选组合框的可能 API 方法。

// 设置/删除值
mySelect.setValue(['4','8']);
mySelect.removeValue(['4','8']);
 
// 获取选定的值
mySelect.getData();
 
// 获取当前数据的数组
mySelect.getSource();
 
// 选择所有值
mySelect.selectAll(true/false);
 
// 加载更多选项
mySelect.loadSource([
  {caption:'Option 1',value:'value1',selected:true},
  {caption:'Option 2',value:'value2',selected:false},
]);
 
// 重新加载实例
mySelect.reload();



官方网站:https://github.com/jagadeesanjd11/MSFmultiSelect

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