一个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>



你可能感兴趣的:(select)