首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

Posted in jQuery onMay 31, 2018

本文实例讲述了JS与jQuery实现ListBox上移,下移,左移,右移操作功能。分享给大家供大家参考，具体如下：

先来看看Javascript版选择下拉菜单互移且排序操作：

<html>
<head>
  <title>Javascript版选择下拉菜单互移且排序</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
  <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p>
  <form method="post" name="myform">
  <table border="0" width="300">
    <tr>
      <td width="40%">
        <select style="width:100px; height:200px" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="山东">山东</option>
          <option value="安徽">安徽</option>
          <option value="重庆">重庆</option>
          <option value="福建">福建</option>
          <option value="甘肃">甘肃</option>
          <option value="广东">广东</option>
          <option value="广西">广西</option>
          <option value="贵州">贵州</option>
          <option value="海南">海南</option>
          <option value="河北">河北</option>
          <option value="黑龙江">黑龙江</option>
          <option value="河南">河南</option>
          <option value="湖北">湖北</option>
          <option value="湖南">湖南</option>
          <option value="内蒙古">内蒙古</option>
          <option value="江苏">江苏</option>
          <option value="江西">江西</option>
          <option value="吉林">吉林</option>
          <option value="辽宁">辽宁</option>
          <option value="宁夏">宁夏</option>
          <option value="青海">青海</option>
          <option value="山西">山西</option>
          <option value="陕西">陕西</option>
          <option value="四川">四川</option>
          <option value="天津">天津</option>
          <option value="西藏">西藏</option>
          <option value="新疆">新疆</option>
          <option value="云南">云南</option>
          <option value="浙江">浙江</option>
          <option value="香港">香港</option>
          <option value="澳门">澳门</option>
          <option value="台湾">台湾</option>
          <option value="其他">其他</option>
        </select>
      </td>
      <td width="20%" align="center">
        <input type="button" value=">>" onclick="moveOption(document.myform.list1, document.myform.list2)"><br />
        <br />
        <input type="button" value="<<" onclick="moveOption(document.myform.list2, document.myform.list1)">
      </td>
      <td width="40%">
        <select style="width:100px; height:200px" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">
        </select>
      </td>
      <td>
        <button onclick="changepos(list2,-1)" type="button">
          ∧</button>
        <br />
        <button onclick="changepos(list2,1)" type="button">
          ∨</button>
      </td>
    </tr>
  </table>
  值：<input type="text" name="city" size="40">
  </form>
  <script language="JavaScript">
  <!--
    function moveOption(e1, e2) {
      try {
        for (var i = 0; i < e1.options.length; i++) {
          if (e1.options[i].selected) {
            var e = e1.options[i];
            e2.options.add(new Option(e.text, e.value));
            e1.remove(i);
            i = i - 1
          }
        }
        document.myform.city.value = getvalue(document.myform.list2);
      }
      catch (e) { }
    }
    function getvalue(geto) {
      var allvalue = "";
      for (var i = 0; i < geto.options.length; i++) {
        allvalue += geto.options[i].value + ",";
      }
      return allvalue;
    }
    function changepos(obj, index) {
      if (index == -1) {
        if (obj.selectedIndex > 0) {
          obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex - 1))
        }
      }
      else if (index == 1) {
        if (obj.selectedIndex < obj.options.length - 1) {
          obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex + 1))
        }
      }
    }
  //-->
  </script>
</body>
</html>

运行效果：

JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

再来看看Jquery版选择下拉菜单互移且排序功能：

<html>
<head>
  <title>Jquery版选择下拉菜单互移且排序</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
  <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p>
  <form method="post" name="myform">
  <table border="0" width="300">
    <tr>
      <td width="40%">
        <select style="width:100px; height:200px" multiple name="list1" id="list1" ondblclick="ListBox_Move('list1','list2')">
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="山东">山东</option>
          <option value="安徽">安徽</option>
          <option value="重庆">重庆</option>
          <option value="福建">福建</option>
          <option value="甘肃">甘肃</option>
          <option value="广东">广东</option>
          <option value="广西">广西</option>
          <option value="贵州">贵州</option>
          <option value="海南">海南</option>
          <option value="河北">河北</option>
          <option value="黑龙江">黑龙江</option>
          <option value="河南">河南</option>
          <option value="湖北">湖北</option>
          <option value="湖南">湖南</option>
          <option value="内蒙古">内蒙古</option>
          <option value="江苏">江苏</option>
          <option value="江西">江西</option>
          <option value="吉林">吉林</option>
          <option value="辽宁">辽宁</option>
          <option value="宁夏">宁夏</option>
          <option value="青海">青海</option>
          <option value="山西">山西</option>
          <option value="陕西">陕西</option>
          <option value="四川">四川</option>
          <option value="天津">天津</option>
          <option value="西藏">西藏</option>
          <option value="新疆">新疆</option>
          <option value="云南">云南</option>
          <option value="浙江">浙江</option>
          <option value="香港">香港</option>
          <option value="澳门">澳门</option>
          <option value="台湾">台湾</option>
          <option value="其他">其他</option>
        </select>
      </td>
      <td width="20%" align="center">
        <input type="button" value=">>" onclick="ListBox_Move('list1','list2')"><br />
        <br />
        <input type="button" value="<<" onclick="ListBox_Move('list2','list1')">
      </td>
      <td width="40%">
        <select style="width:100px; height:200px" multiple name="list2" id="list2" ondblclick="ListBox_Move('list2','list1')">
        </select>
      </td>
      <td>
        <button onclick="ListBox_Order('list2','up')" type="button">
          ∧</button>
        <br />
        <button onclick="ListBox_Order('list2','down')" type="button">
          ∨</button>
      </td>
    </tr>
  </table>
  值：<input type="text" name="city" size="40">
  </form>
  <script language="JavaScript">
  function ListBox_Move(listfrom,listto)
  {
    var size = $("#" + listfrom + " option").size();
    var selsize = $("#" + listfrom + " option:selected").size();
    if(size>0 && selsize>0)
    {
      $.each($("#"+listfrom+" option:selected"), function(i,own){
        $(own).appendTo($("#" + listto));
        $("#" + listfrom + "").children("option:first").attr("selected",true);
      });
    }
  }
  function ListBox_Order(ListName,action)
  {
    var size = $("#"+ListName+" option").size();
    var selsize = $("#"+ListName+" option:selected").size();
    if(size > 0 && selsize > 0)
    {
      $.each($("#"+ListName+" option:selected"),function(i,own){
        if(action == "up")
        {
          $(own).prev().insertAfter($(own));
        }
        else if(action == "down")//down时选中多个连靠则操作没效果
        {
          $(own).next().insertBefore($(own));
        }
      })
    }
  }
  </script>
</body>
</html>

运行效果：

JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

- Author -

smartsmile2012

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery实现多张图片上传预览（不经过后端处理）
Apr 29 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jquery处理checkbox（复选框）是否被选中实例代码
Jun 12 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 #jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 #jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
收信机(3) 66-XI(1) 晶体管(2) VOLVO(1) MOTOROLA(1) 摩托罗拉(1) 军机(1) 音箱(1) 77A(2) BOSE(2)
You might like
laravel 执行迁移回滚示例
2019/10/23 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
浅析javascript 定时器
2014/12/23 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
python3生成随机数实例
2014/10/20 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
pandas取出重复数据的方法
2019/07/04 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
Monnier Freres中文官网：法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
Lookfantastic葡萄牙官方网站：欧洲第一大化妆品零售商
2018/03/17 全球购物
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
法律六进活动方案
2014/03/13 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
郭明义观后感
2015/06/08 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle