一个select双击切换效果

最新推荐文章于 2021-06-25 20:08:00 发布

dengjiao9684

最新推荐文章于 2021-06-25 20:08:00 发布

阅读量131

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/blueDream2011/archive/2011/10/15/2212776.html

版权

无聊写了一个简单的select双击切换效果...

让我把重点讲解下.

changeSelect(true,this.id);changeSelect(false,this.id); //获取当前ID,true or false.

if(opt.selected) //判断是否选中.

elem.removeChild(opt); //删除当前select下的选中option

elem.nextSibling.nextSibling.appendChild(opt); //把当前select下的选中option追加到下一个select下

elem.previousSibling.previousSibling.appendChild(opt); //上一步相反.

好困啊.睡觉.

整体代码:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>一个select双击切换效果</title>
</head>
<body>
<select ondblclick="changeSelect(true,this.id);" id="left" multiple="multiple">  
<option value="0">left1</option>  
<option value="1">left2</option>  
<option value="2">left3</option>  
</select>  
<select ondblclick="changeSelect(false,this.id);" id="right"  multiple="multiple">  
<option value="0">right1</option>  
<option value="1">right2</option>  
<option value="2">right3</option>  
</select>  

<script type="text/javascript">
function changeSelect(b,id){  
var $a = document.getElementById(id); 
if(b ==true){
var elem=$a;
                    }else{
var elem=$a;
                    }
for(var i=0;i<elem.options.length;i++)  
                    {  
var opt=elem.options[i];  
if(b ==true){
if(opt.selected){  
                                            elem.removeChild(opt);  
                                            elem.nextSibling.nextSibling.appendChild(opt);  
                                        }
                                }else{
if(opt.selected){  
                                            elem.removeChild(opt);  
                                            elem.previousSibling.previousSibling.appendChild(opt);  
                                        }
                                }
                    }  
        }          
</script>



</body>
</html>