搜索 | 会员  
可以左右移动多选下拉列表的javaScipt(可以兼容IE和firefox)
来源: http://www.cnblogs.com/kungfupanda/   作者:网友  日期:2010-6-29  类别:其它语言  主题:Python  编辑:德仔
lt;htmlgt; lt;script language=quot;javascriptquot;gt; nb
<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> &gt;</a><br />
        <a onclick="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>
 
德仔网尊重行业规范,每篇文章都注明有明确的作者和来源;德仔网的原创文章,请转载时务必注明文章作者和来源:德仔网;
头条那些事
大家在关注
广告那些事
我们的推荐
也许感兴趣的
干货
了解一下吧