自己在项目业余时间总结了一份可以左右移动（Add和remove）多选下拉列表的javaScipt,可以兼容IE和firefox,并且经过测试，只是代码略显臃肿，希望各位网友参考后给一些指点，特别是在简化代码方面。

我在让其兼容 firefox很是费了一番心血，所以希望也能对大家有帮助。

注：其实我的javaScript后台和AJAX集成， 和key的多选下拉列表在项目中隐藏掉就好了。javaScipt左右移动和resource相关的下拉列表，不需要全表单提交，就可以改变右边两个多选下拉列表的值，然后提交到后台。

<html>
<script language="javascript">
            function isIE(){ //ie?
            if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1)
                return true;
               else
                return false;
             }

function moveSelected(oSourceSelName,oTargetSelName,oSourceSelNamekey,oTargetSelNameKey)
            {                 
                    //alert("isIE  "+isIE());

var selectResourcesString = "";
                    var arrSelValue = new Array();        
                    var arrSelText = new Array();
                    var arrSelOption = new Array();                
                    var oSourceSel = document.getElementById(oSourceSelName);
                    var oTargetSel = document.getElementById(oTargetSelName);

var arrSelValueKey = new Array();                              
                    var arrSelTextKey = new Array();
                    var arrSelOptionKey = new Array();
                    var oSourceSelKey = document.getElementById(oSourceSelNamekey);
                    var oTargetSelKey = document.getElementById(oTargetSelNameKey);
                    if(!isIE())
                    {
                        //alert("if")
                        var optionContent = oTargetSel.innerHTML;            
                        var optionContentKey = oTargetSelKey.innerHTML;
                        //alert("optionContentKey  "+optionContentKey);
                        for(var i=0; i<oSourceSel.options.length; i++)
                        {
                            if(oSourceSel.options[i].selected)
                            {
                                arrSelValue[arrSelValue.length] = oSourceSel.options[i].value;   
                                arrSelText[arrSelText.length] = oSourceSel.options[i].text;                                                
                                arrSelOption[arrSelOption.length] = oSourceSel.options[i];        
                                arrSelValueKey[arrSelValueKey.length] = oSourceSelKey.options[i].value;
                                arrSelTextKey[arrSelTextKey.length] = oSourceSelKey.options[i].text;
                                arrSelOptionKey[arrSelOptionKey.length] = oSourceSelKey.options[i];
                                            
                            }
                        }            
                        for(var i=0; i<arrSelValue.length; i++)  
                        {
                            var name =  arrSelText[i];
                            var value =  arrSelValue[i];
                            var oOption = '<option value=';
                            oOption += value;
                            oOption += '>';
                            oOption += name;
                            oOption += '</option>';
                            var oOptionKey = '<option value=';
                            oOptionKey += arrSelValueKey[i];
                            oOptionKey += '>';
                            oOptionKey += arrSelTextKey[i];
    
                            oOptionKey += '</option>';
                            optionContent +=  oOption;
                            optionContentKey +=  oOptionKey;
                            oSourceSel.removeChild(arrSelOption[i]);
                            oSourceSelKey.removeChild(arrSelOptionKey[i]);
                        }
                        oTargetSel.innerHTML = optionContent;
                        oTargetSelKey.innerHTML = optionContentKey;         
                    }
                    else
                    {
                        //alert("else");                                                     
                        for(var i=0; i<oSourceSel.options.length; i++)
                        {
                            if(oSourceSel.options[i].selected)
                            {
                                arrSelValue[arrSelValue.length] = oSourceSel.options[i].value;                                                
                                arrSelText[arrSelText.length] = oSourceSel.options[i].text;                                                                
                                arrSelOption[arrSelOption.length] = oSourceSel.options[i];
                                arrSelValueKey[arrSelValueKey.length] = oSourceSelKey.options[i].value;
                                arrSelTextKey[arrSelTextKey.length] = oSourceSelKey.options[i].text;
                                arrSelOptionKey[arrSelOptionKey.length] = oSourceSelKey.options[i];             
                            }
                        }
                        
                        //alert("arrSelValue"+arrSelValue);
                        for(var i=0; i<arrSelValue.length; i++)  
                        {
                            var name =  arrSelText[i];
                            var value =  arrSelValue[i];
                            var oOption = document.createElement("option");
                            oOption.text = arrSelText[i];
                            oOption.value = arrSelValue[i];
                            var oOptionKey =  document.createElement("option");
                            oOptionKey.text = arrSelTextKey[i];
                            oOptionKey.value = arrSelValueKey[i];
                            var k=0;
                            for(k=0;k<oTargetSel.options.length;k++)
                            {
                                if(oTargetSel.options[k].value > arrSelValue[i])
                                {
                                   break;    
                                }            
                            }
                            for(k=0;k<oTargetSelKey.options.length;k++)
                            {
                                if(oTargetSelKey.options[k].value > arrSelValueKey[i])
                                {
                                   break;    
                                }            
                            }                    
                            //alert("oOption "+oOption);
                            oTargetSel.add(oOption,k);
                            oTargetSelKey.add(oOptionKey,k);
                            oSourceSel.removeChild(arrSelOption[i]);
                            oSourceSelKey.removeChild(arrSelOptionKey[i]);
                            //alert(oSourceSel.value);
                            //alert(oSourceSelKey.value);
                        }     
                    }
            }
</script>
<form>

<table>
<tr>
<td>
Resource
<div>
    <select id="$Select" multiple="multiple"  size="12">
        <option value="0">server 1</option>
        <option value="1">server 2</option>
     </select>
</div>
<div>
<td>
        <a οnclick="javaScript:moveSelected('$Select','$Select$0','$Select$1','$Select$0$0')"  href="#" id="Add"><span>Add</span> &gt;</a><br />
        <a οnclick="javaScript:moveSelected('$Select$0', '$Select','$Select$0$0','$Select$1')"  href="#" id="Move">&lt; <span>Remove</span></a>            
</td>
</div>    
</td>
<td>
<div>
<select id="$Select$0" multiple="multiple"  size="12">

<option value="0">server 3</option>
    <option value="1">server 4</option>
 </select>
</div>
<td>
<tr>

<tr>
<td>
Key
<div>
<select id="$Select$1" multiple="multiple"  size="12">
         <option value="0">server 1 key</option>
        <option value="1">server 2 key</option>
</select>
</div>    
</td>
<td>
        
</td>
<td>
<div>
<select id="$Select$0$0" multiple="multiple" size="12">
        <option value="0">server 3 key</option>
        <option value="1">server 4 key</option>
 </select>
</div>
</td>
</tr>
</table>
</form>
</html>

转载于:https://www.cnblogs.com/kungfupanda/archive/2010/06/28/1766722.html

可以左右移动多选下拉列表的javaScipt(可以兼容IE和firefox)相关推荐

  1. axure 下拉多选 元件_Axure教程：下拉多选列表集合（多选下拉列表+单选下拉列表+分级下拉列表）...

    原标题:Axure教程:下拉多选列表集合(多选下拉列表+单选下拉列表+分级下拉列表) 之前和大家分享了 <>.<>,很多同学私信我说很好使用,希望能够做一个多选下拉列表的教程 ...

  2. 隔行换色案例||全选和全不选||QQ表情选择||多选下拉列表左右移动

    01.隔行换色.html <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...

  3. JQuery 多选下拉列表左右移动

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  4. AUI_Js脚本_Jira多选下拉列表前端样式优化

    Js脚本_Jira多选下拉列表前端样式优化 标准的多选下拉列表在选择时的样式像是一个文本框平铺开来,用JS脚本优化成类似"Label"的视图效果. 实践方法: 在customfie ...

  5. android自定义多选框 带图片,Android自定义单选多选下拉列表的实例代码

    发疯的产品要做一个可以单选和多选的下拉列表,陪你玩玩吧. 直接上效果: 实现方案: 我的思路是自定义一个类继承PopupWindow,里面的选项采用Listview,再结合一些动画来实现. 核心代码: ...

  6. jquery书写左右两个多选下拉列表交换移除功能

    使用jquery做一个多选列表左右互换的功能,代码如下 <!DOCTYPE HTML> <html lang="en-US"> <head>&l ...

  7. vue+elementui中，el-select多选下拉列表中，如何同时获取:value和:label的值？

    大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. 项目场景: 正如题目所说,今天在项目过程中遇到了个需求,因为需要在前台展示运动员的名称,但是运动员的编号在别的地方还需要使用,所以想了想,还是将编 ...

  8. html树形多选下拉列表,EasyUI 多行树形下拉框(Multiple ComboTree)_Vue EasyUI Demo

    源代码 Multiple ComboTree v-model="value" :data="data" :multiple="true" : ...

  9. poi怎么设置某个单元格为下拉框_java excel 多选下拉列表设置

    方案二 方案二的思路是在excel中添加一个隐藏的sheet存放数据源(下拉的数据),在真正需要下拉的sheet单元格写入属性. 1.需要使用到的util类 package com.excel.sel ...

最新文章

  1. asp.net 中显示各类文件
  2. Underscore实例教程
  3. ASP.NET Calendar 控件
  4. oracle迁移到mysql工具_oracle数据库想迁移到mysql上 有什么方法或者工具吗
  5. Codeforces 773D Perishable Roads 最短路 （看题解）
  6. （大数据工程师学习路径）第四步 SQL基础课程----SQL介绍及mysql的安装
  7. android8.0自适应图标,适配8.0+的自适应图标
  8. ContextAttribute类
  9. head first java 03 ( 6 章 )
  10. 硬核教程 - 使用Rust编写网游FPS外挂辅助
  11. 广义线性模型解读必看文章
  12. 带色彩恢复的视网膜增强算法实现 （MATLAB版本）
  13. cf487e Tourists 题解（圆方树）
  14. 开发新产品的三个验证阶段（EVT/DVT/PVT）
  15. Linux S_ISVTX 黏着位的作用
  16. php五只猴子分椰子_（笔试题）分椰子
  17. 好记性不如烂笔头——Vite篇
  18. mysql当前读和一致性读_数据库 一致性读当前读
  19. Mingw64编译Opencv
  20. java 视频解析_ffmpeg解析视频的每一帧（java ）

热门文章

  1. PowerShell 导入 SQL Server 的 PS 模块
  2. workerman源码分析之启动过程
  3. path,classpath
  4. HTTP头部信息解释分析(详细整理)
  5. 如何免费（轻成本）在网上做推广宣传
  6. 开发webpart时建立图像文件夹和CSS，js文件夹
  7. Create a restful app with AngularJS/Grails(4)
  8. 如何定位EXC_BAD_ACCESS错误 (info malloc-history)
  9. 阿里巴巴连任 Java 全球管理组织席位
  10. 【iOS-cocos2d-X 游戏开发之十四】cocos2dx(c++)中访问object函数