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

000

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

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

© 版权声明
版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
JavaScript
# 编程开发# JavaScript
喜欢就支持一下吧
点赞0 分享
网络的头像-偶像资源网
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
25天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
25天前 28
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checke...
28天前 4
jQuery实现滚动效果-偶像资源网
jQuery实现滚动效果
jQuery实现滚动效果
25天前 3
PHP队列原理及基于队列的写文件案例-偶像资源网
PHP队列原理及基于队列的写文件案例
PHP队列原理及基于队列的写文件案例
25天前 2
css文本两端对齐的实现代码-偶像资源网
css文本两端对齐的实现代码
css文本两端对齐的实现代码
28天前 2
相关推荐
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
25天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
25天前 28
吊打全网所有精美导航页引导页HTML源码-偶像资源网
吊打全网所有精美导航页引导页HTML源码
吊打全网所有精美导航页引导页HTML源码
28天前 24
5.9K⭐ 轻松搞定定时任务！Web管理超便捷-偶像资源网
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
28天前 23
css的基本选择器有哪些？-偶像资源网
css的基本选择器有哪些？
css的基本选择器有哪些？
29天前 23
【jQuery Demo】图片切换效果整理-偶像资源网
【jQuery Demo】图片切换效果整理
【jQuery Demo】图片切换效果整理
26天前 4
评论 抢沙发

请登录后发表评论

    暂无评论内容