制作左右选择框

2019-06-27 15:48:50 阅读：684 来源： 互联网

标签：function 选项左右 option 选择 appendTo 制作 select2 select1

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

在做项目的时候，我们可能会经常遇到一些技术点是我们没有遇到过的，所以这个时候程序员会上网查各种各样的资料，那么今天我们来做一个左右选择框的制作。左右选择框的样式如下图：

图中的左右选择框，框里面的数据可以左右移动的，数据可以选着单条移动，也可以双击数据然后数据会左右框切换，还可以点击“>>”或者“<<”两个按钮，把框里面的所有选项都到另外一个框。这就是左右选择框的功能部分，要实现它该怎么办？
制作左右选择框的时候，首先我们要引用一个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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

制作左右选择框