代码改变世界

两个Select互选的Javascript实现

2006-06-12 00:46  晓风残月  阅读(1101)  评论(0)    收藏  举报
自己用javascript写了一个两个select互选的，可多选，为了兼容IE和Firefox真是礼金千辛万苦，对Javascript和DOM还不是黑熟，参考了网上一些Demo，致谢！
<html>
<body>
<div>
<select id="oSelect1" name="Cars" size="10" multiple="multiple">
<option value="1">BMW</option>
<option value="2">Porsche</option>
<option value="3" >Mercedes</option>
</select>
<input type="button" onclick="choose('oSelect1', 'oSelect2')" value=">>" />
<br />
<input type="button" onclick="choose('oSelect2', 'oSelect1')" value="<<" />
<select id="oSelect2" name="Cars" size="10" multiple="multiple">
</select>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">  
    function choose(src, dst) {
        var oSelect1 = document.getElementById(src);
        var oSelect2 = document.getElementById(dst);
        
        var opts = new Array();           
        var i;                    
         
        for(i = 0; i < oSelect1.options.length; i++)
        {            
            var item = oSelect1.options[i];        
            if(item.selected) {
               opts.push(item);                
            }
        }       
        
        for(i = 0; i < opts.length; i++)
        {            
            var opt = document.createElement("<option>");
            opt.text = opts[i].text;
            opt.value = opts[i].value;
            
            if(navigator.appName == 'Microsoft Internet Explorer') {
                oSelect2.add(opt);
                //oSelect2.add(opt, null); // IE 不支持
                //oSelect2.appendChild(opt); // IE 不支持,可以添加，但是不显示，^||^
            }
            else {
                //oSelect2.add(opt);      // firefox 不支持
                oSelect2.add(opt, null);                
                //oSelect2.appendChild(opt); // firefox 支持
            }
            oSelect1.removeChild(opts[i]);                    
        }
    }   
</script>