<!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. python 变量离散化

  2. 洛谷P1774 最接近神的人_NOI导刊2010提高（02） [2017年6月计划 线段树03]

    P1774 最接近神的人_NOI导刊2010提高(02) 题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门 ...

  3. 通过工具SQLyog进行导入数据

    可以通过工具SQLyog进行图形化导入数据. 1.准备好Excel表格 2.将excel表格数据导入到mysql数据库 (1)打开准备好的excel表,选择格式 另存为csv. (2)如果准备的exc ...

  4. 【JZOJ3624】【SDOI2014】数数(count) AC自动机+数位dp

    题面 100 容易想到使用AC自动机来处理禁忌子串的问题: 然后在自动机上数位dp,具体是: \(f_{i,j,0/1}\)表示填了\(i\)位,当前在自动机的第\(j\)个结点上,\(0\)表示当前 ...

  5. 全面系统Python3入门+进阶课程

    全面系统Python3入门+进阶课程 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的时候 ...

  6. DirectX11笔记(一)--配置DirectX工程

    原文:DirectX11笔记(一)--配置DirectX工程 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010333737/article/d ...

  7. PHP的生成图片或文字水印的类

    ImageWatermark.php <?php /*********************************************************** 类名:ImageWat ...

  8. 移动web的基础知识

    一.像素 px:CSS pixels逻辑像素,浏览器使用的抽象单位 dp,pt:设备无关像素 (物理像素) dpr:设备像素缩放比 计算公式: 1px = (dpr)*(dpr)*dp 二.viewp ...

  9. 去掉goland中间的令人烦躁的竖线

    去掉“configured in code Style options”前面的勾即可.

  10. Nginx教程(二) Nginx虚拟主机配置 （转）

    Nginx教程(二) Nginx虚拟主机配置 1 虚拟主机管理 1.1 Nginx管理虚拟主机 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主 ...