一个select双击切换效果
无聊写了一个简单的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>
