首页
所有分类
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 封装 Ajax 常用方法(推荐)
May 21 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery实现简单QQ聊天框
Aug 27 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
i5 10400(1) win11(40) ipad(1) GTX1660(1) React(6) win10(43) i7 6700(1) 对讲机(1) Tomcat(18) i5 9400(1)
You might like
用PHP实现文件上传二法
2006/10/09 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
JS字符串函数扩展代码
2011/09/13 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换（2）
2020/11/18 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[02:21]十步杀一人，千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python计算方程式根的方法
2015/05/07 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Python面向对象实现方法总结
2020/08/12 Python
纯CSS3大转盘抽奖示例代码（响应式、可配置）
2017/01/13 HTML / CSS
美国最大的宠物药店：1-800-PetMeds
2016/10/02 全球购物
美国珠宝精品店：Opulent Jewelers
2019/08/20 全球购物
英国儿童设计师服装和玩具购物网站：Zac & Lulu
2020/10/19 全球购物
面试后的感谢信范文
2014/02/01 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
云台山导游词
2015/02/03 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL