制作左右选择框

开发工具与关键技术：VS、JQuery
作者：LJR
撰写时间：2019年 6 月 26 日

1. 在做项目的时候，我们可能会经常遇到一些技术点是我们没有遇到过的，所以这个时候程序员会上网查各种各样的资料，那么今天我们来做一个左右选择框的制作。左右选择框的样式如下图：
   
   图中的左右选择框，框里面的数据可以左右移动的，数据可以选着单条移动，也可以双击数据然后数据会左右框切换，还可以点击“>>”或者“<<”两个按钮，把框里面的所有选项都到另外一个框。这就是左右选择框的功能部分，要实现它该怎么办？
2. 制作左右选择框的时候，首先我们要引用一个JQuery插件：

应用JQuery.min.js的插件，可以减少我们很多代码量，引用了插件，我们就可以对两个选择框进行样式的制作了：

<table width="500" align="center" border="0" cellpadding="0" cellspacing="0" class="newContTab">
  <tr>
    <th>　</th>
    <td><div>
        <div>
          <select multiple="multiple" id="select1" style="width:150px;height:200px; float:left; border:4px #A0A0A4 outset; padding:4px; ">
            <option value="我的首页">我的首页</option>
            <option value="划分认领">划分认领</option>
            <option value="查询平台">查询平台</option>
            <option value="我的客户">我的客户</option>
            <option value="我的报表">我的报表</option>
            <option value="商机管理">商机管理</option>
            <option value="系统管理">系统管理</option>
          </select>
        </div>
        <div style="float:left"> <span id="add">
          <input type="button" class="btn" value=">"/>
          </span><br />
          <span id="add_all">
          <input type="button" class="btn" value=">>"/>
          </span> <br />
          <span id="remove">
          <input type="button" class="btn" value="<"/>
          </span><br />
          <span id="remove_all">
          <input type="button" class="btn" value="<<"/>
          </span> </div>
        <div>
          <select multiple="multiple" id="select2" style="width: 150px;height:200px; float:lfet;border:4px #A0A0A4 outset; padding:4px;">
          </select>
        </div>
      </div></td>
  </tr>
</table>

上面是HTML的代码，对左右选择框进行样式的制作，搭好框架后，还差一点点，就是对每个选项进行jQuery的处理，用jQuery对选项添加点击事件。

//下拉框交换JQuery
$(function(){
    //移到右边
    $('#add').click(function() {
    //获取选中的选项，删除并追加给对方
        $('#select1 option:selected').appendTo('#select2');
    });
    //移到左边
    $('#remove').click(function() {
        $('#select2 option:selected').appendTo('#select1');
    });
    //全部移到右边
    $('#add_all').click(function() {
        //获取全部的选项,删除并追加给对方
        $('#select1 option').appendTo('#select2');
    });
    //全部移到左边
    $('#remove_all').click(function() {
        $('#select2 option').appendTo('#select1');
    });
    //双击选项
    $('#select1').dblclick(function(){ //绑定双击事件
        //获取全部的选项,删除并追加给对方
        $("option:selected",this).appendTo('#select2'); //追加给对方
    });
    //双击选项
    $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
    });
});

写完上面的jQuery代码，这个左右选项卡的功能就可以实现了，我们要每个选项附加有什么功能，我们直接附加上去即可！

标签：function,选项,左右,option,选择,appendTo,制作,select2,select1
来源： https://blog.csdn.net/weixin_44546758/article/details/93882486