jQuery双列表左右选择器特效代码

jQuery双列表左右选择器特效代码

一款基于jQuery动态数据双列表左右选择器代码,点击选中列表项,再点击中间按钮进行左右移动操作,顶部按钮可分别获取左右两边的列表数据值。

使用方法
引入相关JS代码文件jquery.min.js和dsSelect.js

1
2
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/dsSelect.js"></script>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
    let dsSelectObj = new dsSelect("dsSelectTemp");
    dsSelectObj.multiSelect =true;
    dsSelectObj.init();
    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"},
        {id:"7",name:"选项7"},
        {id:"8",name:"选项8"},
        {id:"9",name:"选项9"},
        {id:"0",name:"选项0"},
        {id:"10",name:"选项10"},
        {id:"11",name:"选项11"},
        {id:"12",name:"选项12"},
        {id:"13",name:"选项13"},
        {id:"14",name:"选项14"},
        {id:"15",name:"选项15"},
    ];
    let datasR=[
        {id:"16",name:"选项16"},
        {id:"17",name:"选项17"},
        {id:"18",name:"选项18"},
        {id:"19",name:"选项19"},
    ];
    dsSelectObj.setLeftData(datas,"name");
    dsSelectObj.setRightData(datasR,"name");

    function leftValues(){
        alert(JSON.stringify(dsSelectObj.getSelectLeftValus()));
    }
    function rightValues(){
       alert(JSON.stringify(dsSelectObj.getSelectRightValus()));
    }
    function disableButtons(){
        dsSelectObj.disableButtons();
    }

    function start(){
        dsSelectObj.restartButtons();
    }

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
   <div style="width:800px; margin: 0px auto">

    <button onClick="leftValues()">获取左侧数据</button>
    <button onClick="rightValues()">获取右侧数据</button>
    <button onClick="disableButtons()">禁用按钮</button>
    <button onClick="start()">启用按钮</button>

    <!--正文-->
     <div class="dsSelect" id="dsSelectTemp">

   </div>
 </div>
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论