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程序设计有所帮助。

jQuery 相关文章推荐
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 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
You might like
珊瑚虫IP库浅析
2007/02/15 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
Python中Class类用法实例分析
2015/11/12 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
pow在python中的含义及用法
2019/07/11 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
会计电算化大学生职业规划书
2014/02/05 职场文书
贷款承诺书范文
2014/05/19 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
销售内勤岗位职责
2015/02/10 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
工商局调档介绍信
2015/10/22 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
Python开发五子棋小游戏
2022/04/28 Python