jQuery双边栏选择框

 查看演示  website  立即下载

使用方法

第一步：导入js和css

<link href="css/dsSelect.css" type="text/css" rel="stylesheet"/> 
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/dsSelect.js"></script>

第二步：创建一个容器

<div  id="dsSelectTemp"> </div>

注意：class必须，但一定要dsSelect，id可以自定义，也是必须

第三步：创建一个实例，并且初始化

let dsSelectObj = new dsSelect("dsSelectTemp");
dsSelectObj.init();

其它使用：

1、多选：

（1）默认是ctrl+鼠标左键

（2）可以在dsSelectObj.init();之前加dsSelectObj.multiSelect =true;便可以进行多选

2、设置左边的数据

dsSelectObj.setLeftData(datas,"name");

（1）dsSelectObj 是之前创建的实例

（2）有两个参数，第一个参数是数据，第二个参数是数据中要被现实的属性名称，如下：

let datas = [
  {id:"1",name:"选项1"},
  {id:"2",name:"选项2"},
  {id:"3",name:"选项3"},
  {id:"4",name:"选项4"},
  {id:"5",name:"选项5"},
  {id:"6",name:"选项6"}
];

我要显示的是name

3、设置右边数据：

dsSelectObj.setRightData(datasR,"name");

参考2描述

4、获取左边包含的数据

dsSelectObj.getSelectLeftValus()

显示的是个数组，如果没有则返回：[]

5、获取右边包含的数据

dsSelectObj.getSelectRightValus()

6、禁用中间按钮操作

dsSelectObj.disableButtons();

7、启用中间按钮操作

dsSelectObj.restartButtons();

PREVIOUS:
NEXT:
纯CSS水平导航(原创)
jQuery球球大作战新版