WEB开发网
开发学院网页设计JavaScript 可以左右移动多选下拉列表的javaScipt(可以兼容IE... 阅读

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

 2010-06-28 00:00:00 来源:WEB开发网   
核心提示:自己在项目业余时间总结了一份可以左右移动(Add和remove)多选下拉列表的javaScipt,可以兼容IE和firefox,并且经过测试,只是代码略显臃肿,可以左右移动多选下拉列表的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   href="#" id="Add"><span>Add</span> ></a><br />
        <a   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>

Tags:可以 左右 移动

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接