<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<TITLE> Select Demo </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>

<style>

    center

    {

        font-size:12px;

        color:red;

        font-weight:bold;

    }

    select

    {

        font-size:12px;

        color:green;

    }

</style>

<BODY>

    <span id='feedback'></span>

    <form method="post" name="myform">

  <table border="0" width="400">

 <tr>

  <td><CENTER>可选择排序方式</CENTER></td>

  <td> </td>

  <td><CENTER>已选择排序方式</CENTER></td>

 </tr>

    <tr>

      <td width="40%">

  <select  multiple name="left" id="left" size="8" style='width:200;'

  ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">

       <option value="20">测试数据一</option>

       <option value="30">测试数据二</option>

       <option value="40">测试数据三</option>

       <option value="50">测试数据四</option>

       <option value="60">测试数据五</option>

       <option value="70">测试数据六</option>

       <option value="80">测试数据七</option>

       <option value="90">测试数据八</option>  

  </select>

   </td>

      <td width="20%" align="center">

  <input type="button" value=" >> " onclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br>

  <input type="button" value=" << " onclick="dropOption(document.getElementById('right'))">

   </td>

      <td width="40%">

  <select  multiple name="right" id="right" size="8" style='width:200;'

  ondblclick="dropOption(document.getElementById('right'))">

  </select>

   </td>

    </tr>

<tr>

<td colspan="3"><CENTER>

    <INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right'));">

    <INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right'));">

    <INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right'));">

    <INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById('right'));">

</CENTER></td>

</tr>

  </table>

</BODY>

</HTML>

<SCRIPT LANGUAGE="JavaScript">

<!--

    //上移

    function moveUp(obj){

        for(var i=1; i < obj.options.length; i++){//最上面的一个不需要移动，所以直接从i=1开始

            if(obj.options[i].selected){

                if(!obj.options.item(i-1).selected){

                    var selText = obj.options[i].text;

                    var selValue = obj.options[i].value;

                    obj.options[i].text = obj.options[i-1].text;

                    obj.options[i].value = obj.options[i-1].value;

                    obj.options[i].selected = false;

                    obj.options[i-1].text = selText;

                    obj.options[i-1].value = selValue;

                    obj.options[i-1].selected=true;

                }

            }

        }

    }

    //下移

    function moveDown(obj){

        for(var i = obj.options.length -2 ; i >= 0; i--){//向下移动，最后一个不需要处理，所以直接从倒数第二个开始

            if(obj.options[i].selected){

                if(!obj.options[i+1].selected){

                    var selText = obj.options[i].text;

                    var selValue = obj.options[i].value;

                    obj.options[i].text = obj.options[i+1].text;

                    obj.options[i].value = obj.options[i+1].value;

                    obj.options[i].selected = false;

                    obj.options[i+1].text = selText;

                    obj.options[i+1].value = selValue;

                    obj.options[i+1].selected=true;

                }

            }

        }

    }

    //移动

    function moveOption(obj1, obj2){

        for(var i = obj1.options.length - 1 ; i >= 0 ; i--){

            if (obj2.options.length > 0){

                var exsits = false;

                for (var j = 0; j < obj2.options.length; j ++ ){

                    if (obj2.options[j].value == obj1.options[i].value){

                        exsits = true;

                        break;

                    }

                }

                if(exsits){

                    continue;

                }

            }

            if(obj1.options[i].selected){

                var opt = new Option(obj1.options[i].text,obj1.options[i].value);

                opt.selected = true;

                obj2.options.add(opt);

                //obj1.remove(i);

            }

        }

    }

    //删除

    function dropOption(obj){

        for(var i = obj.options.length - 1 ; i >= 0 ; i--){

            if(obj.options[i].selected){

                obj.remove(i);

            }

        }

    }

    //置顶

    function  moveTop(obj){

        var opts = [];

        for(var i =obj.options.length -1 ; i >= 0; i--){

            if(obj.options[i].selected){

                opts.push(obj.options[i]);

                obj.remove(i);

            }

        }

        var index = 0 ;

        for(var t = opts.length-1 ; t>=0 ; t--){

            var opt = new Option(opts[t].text,opts[t].value);

            opt.selected = true;

            obj.options.add(opt, index++);

        }

    }

    //置底

    function  moveBottom(obj){

        var opts = [];

        for(var i =obj.options.length -1 ; i >= 0; i--){

            if(obj.options[i].selected){

                opts.push(obj.options[i]);

                obj.remove(i);

            }

        }

        for(var t = opts.length-1 ; t>=0 ; t--){

            var opt = new Option(opts[t].text,opts[t].value);

            opt.selected = true;

            obj.options.add(opt);

        }

    }

    //-->

</SCRIPT>

Select multiple多选上移、下移的更多相关文章

  1. php修改排序，上移下移

    php修改排序,上移下移 /**    $UpDown //移动方向,up或down    $table //表名    $id //当前移动的ID    $id_col //ID字段的名称    $ ...

  2. javaWeb上移下移（SpringMVC+Mabits+MySql）

    文章已移至:https://blog.csdn.net/baidu_35468322/article/details/79643356 移动之前: 移动之后: 1.控制层 /** * 修改排序 * * ...

  3. AngularJS实现数据列表的增加、删除和上移下移等功能实例

      转: http://www.jb51.net/article/91991.htm 这篇文章给大家分享了AngularJS循环实现数据列表的增加.删除和上移下移等基础功能,对大家学习AngularJ ...

  4. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  5. JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. table中实现数据上移下移效果

    html 由于vue+Element项目中的table,没有开放的上移下移的api,但是能对数据操作,故思路为数组中的一条数据,再重新添加一条数据,办法有点笨,但是好歹也是实现了,望有好的办法的,请留 ...

  7. jqgrid 上移下移单元格

    在表格中常常需要调整表格中数据的显示顺序,我用的是jqgrid,实现原理就是将表中的行数保存到数据库中,取数据时按行进行排序 1.上移,下移按钮 <a href="javascript ...

  8. wpf listbox 选中项 上移下移

    原文:wpf listbox 选中项 上移下移 private void MoveUp_Click(object sender, RoutedEventArgs e)         {        ...

  9. vue 实现模块上移下移 实现排序

    效果图 上移 下移 首先想到的是 数组的相互替换嘛 <template> <div> <div class="box" v-for="(it ...

随机推荐

  1. 洛谷P2347 砝码称重 [2017年4月计划 动态规划01]

    P2347 砝码称重 题目描述 设有1g.2g.3g.5g.10g.20g的砝码各若干枚(其总重<=1000), 输入输出格式 输入格式: 输入方式:a1 a2 a3 a4 a5 a6 (表示1 ...

  2. 【react】react-reading-track

    这是一个很有趣的图书阅读demo 先放github地址:https://github.com/onlyhom/react-reading-track 我觉得这个博主的项目很有意思呢 我们一起看看代码啊 ...

  3. IDG资本全球拼图：近10年揽26家独角兽，最敢出手VC再造"VC+"

    IDG资本全球拼图:近10年揽26家独角兽,最敢出手VC再造"VC+" 2017-04-01 15:33   两天前,IDG资本合伙人过以宏提出的“VC+”,又有了新的内涵——全球 ...

  4. 50道python面试题

    1.大数据的文件读取 ① 利用生成器generator ②迭代器进行迭代遍历:for line in file 2.迭代器和生成器的区别 1)迭代器是一个更抽象的概念,任何对象,如果它的类有next方 ...

  5. phpExcel 操作示例

    片段 1 片段 2 phpExcel 操作示例 <?php //写excel //Include class require_once('Classes/PHPExcel.php'); requ ...

  6. 来实现一个缩水版Vuex

    对 Vuex 源码进行浓缩,DIY 一个小型 Vuex 功能如下 通过 $store.commit 改变 $store.state 实现 strict model 源码约70行左右比较好理解,下面讲解 ...

  7. Contentprovider 注册 启动简单流程

    安装app时packagemanager 读取manixfest获取provider信息 存在数据库里流程:1.加载ActivityThread main方法,创建消息队列.ActivityThrea ...

  8. SpringBoot Cloud eureka 注册中心

    SpringBoot Cloud是什么 Spring Cloud是一个分布式的整体解决方案. Spring Cloud 为开发者提供了在分布式系统(配置管理,服务发现,熔断,路由,微代理,控制总线,一 ...

  9. 仿Google Nexus菜单样式

    在线演示 本地下载

  10. oracle如何限定特定IP访问数据库

    可以利用登录触发器.cmgw或者是在$OREACLE_HOME/network/admin下新增一个protocol.ora文件(有些os可能是. protocol.ora),9i可以直接修改sqln ...