将一个select中的内容移动到另一个select中-白红宇

                         
<div class=
"centent"
>
        
<select multiple id=
"select1"
style=
"width:130px;height:180px;"
>
            
<option value=
"1"
>孙克杰</option>
            
<option value=
"2"
>朱信宗</option>
            
<option value=
"3"
>杨帆</option>
            
<option value=
"4"
>林非比</option>
            
<option value=
"5"
>亚历山大</option>
            
<option value=
"6"
>凌峰</option>
            
<option value=
"7"
>宋松</option>
            
<option value=
"8"
>王子瑜</option>
        
</select>
        
<div class=
"span1"
>
            
<span id=
"add"
>右移>></span><br/>
            
<span id=
"add_all"
>全部>></span>
        
</div>
    
</div>
    
<div class=
"centent"
> 
        
<select multiple id=
"select2"
style=
"width:130px;height:180px"
>
        
        
</select>
        
<div class=
"span2"
>
            
<span id=
"remove"
style=
"width:500px"
>左移<<</span><br/>
            
<span id=
"remove_all"
>全部<<</span>
        
</div>
    
</div>
        
      

                         
<style type=
"text/css"
>
    
span{ 
        
border
:
1px
solid
black
;
        
background-color
:
#99FFFF
;
        
cursor
:
pointer
;
    
}
    
.centent{ 
        
width
:
200px
;
        
float
:
left
;
    
}
    
.span
1
{ 
        
position
:
absolute
;
        
top
:
350px
;
        
left
:
150px
;
    
}
    
#add
_all{ 
        
position
:
absolute
;
        
top
:
30px
;
    
}
    
.span
2
{ 
        
position
:
absolute
;
        
top
:
410px
;
        
left
:
150px
;
    
}
    
#remove_all{ 
        
position
:
absolute
;
        
top
:
30px
;
    
}
</style>
        
      

                         
<script>
$(
function
(){      
    
$(
"#add"
).click(
function
(){ 
        
var
$options = $(
"#select1 option:selected"
);
//获取选中的选项
        
$options.appendTo(
"#select2"
);
//追加到select2的select中
    
});
    
$(
"#add_all"
).click(
function
(){ 
        
var
$options = $(
"#select1 option"
);
        
$options.appendTo(
"#select2"
);
    
});
    
//实现双击时，右移
    
$(
"#select1"
).dblclick(
function
(){ 
        
var
$options = $(
"#select1 option:selected"
);
        
$options.appendTo(
"#select2"
);
    
});
    
    
$(
"#remove"
).click(
function
(){ 
        
var
$options = $(
"#select2 option:selected"
);
        
$options.appendTo(
"#select1"
);
    
});
    
$(
"#remove_all"
).click(
function
(){ 
        
var
$options = $(
"#select2 option"
);
        
$options.appendTo(
"#select1"
);
    
});
    
$(
"#select2"
).dblclick(
function
(){ 
        
var
$options = $(
"#select2 option:selected"
);
        
$options.appendTo(
"#select1"
);
    
});
});
</script>
        
      

本文转自 爱笑嘚蛋蛋 51CTO博客，原文链接：http://blog.51cto.com/dd118/1671376，如需转载请自行联系原作者