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

zoukankan html css js c++ java

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

自己在项目业余时间总结了一份可以左右移动（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 onclick="javaScript:moveSelected('$Select','$Select$0','$Select$1','$Select$0$0')" href="#" id="Add"><span>Add</span> ></a><br />
       <a onclick="javaScript:moveSelected('$Select$0', '$Select','$Select$0$0','$Select$1')" href="#" id="Move">< <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>

What Doesn't Kill Me Makes Me Stronger

查看全文

相关阅读:
Windows10 下Apache服务器搭建
 Visual Studio 2019及其注册码
 清理300多台MySQL数据库的过期binlog日志
 JS获取和设置光标的位置
 在android客户端加载html源代码总结
 OpenGL ES2学习笔记（9）-- 转换矩阵
 可行性研究报告之机房收费系统的可行性研究报告
 eclipse 配置Maven问题解决办法：新建maven工程时报错：Could not resolve archetype org.apache.maven.archetypes .
常见的证书格式和相互转换
 九度OJ 题目1384：二维数组中的查找

原文地址：https://www.cnblogs.com/kungfupanda/p/1766722.html