首页
所有分类
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 27 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery操作css样式
May 15 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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
PL550(1) PL450(1) BCL3000(2) 低放电路(1) PL990(2) ICF-SW7600(1) H-501(1) RP2100(1) 乐信(1) ICF-SW07(1)
You might like
PHP中的CMS的涵义
2007/03/11 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
一个很酷的拖动层的js类，兼容IE及Firefox
2009/06/23 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
firefox事件处理之自动查找event的函数（用于onclick=foo()）
2010/08/05 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
vue Render中slots的使用的实例代码
2017/07/19 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
python集合类型用法分析
2015/04/08 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python执行精确的小数计算方法
2019/01/21 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
澳大利亚女性快速时尚零售商：Ally Fashion
2018/04/25 全球购物
Kate Spade澳大利亚官方网站：美国设计师手袋品牌
2019/09/10 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
会计毕业生求职简历的自我评价
2013/10/20 职场文书
安全教育实施方案
2014/03/02 职场文书
一年级评语大全
2014/04/23 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang