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

纯JS双列表框组件
栏目分类:表单   发布日期:2021-09-14   浏览次数:

一个纯 JavaScript 插件,可将普通选择框转换为可搜索的双列表框,用户可以在其中在两个选择面板之间移动选项。

如何使用它:

将样式表“dual-listbox.css”和 JavaScript 文件“dual-listbox.js”添加到网页中。

<link href="dist/dual-listbox.css" rel="stylesheet"> 
<script src="dist/dual-listbox.js"></script>

在目标选择框上初始化 DualListbox 并完成。

<select class="demo" multiple> 
  <option value="1">一个</option> 
  <option value="2">两个</option> 
  <option value="3">三个</option> 
  <option value="4">四个</option> 
  <option value="5">五个</option> 
  <option value="6">六个</option> 
  <option value="7">七个</option> 
  <option value="8">八个</option> 
  <option value="9">九个</option> 
  <option value="10">十个</option> 
</select>
demo = new DualListbox('.selectDemo');

可以覆盖以自定义双列表框的默认选项。

DualListbox('.selectDemo',{
  addEvent: function(value) {
      console.log(value);
  },
  removeEvent: function(value) {
      console.log(value);
  },
  availableTitle: 'Different title',
  selectedTitle: 'Different title',
  addButtonText: '>',
  removeButtonText: '<', addAllButtonText: '>>',
  removeAllButtonText: '<<',
  options: [
      {text:"Option 1", value: "OPTION1"},
      {text:"Option 2", value: "OPTION2"},
      {text:"Selected option", value: "OPTION3", selected:true}
  ]
});

官方网站:https://github.com/maykinmedia/dual-listbox

相关热词: 双列表框多选

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