关闭

jquery实现select框内容的左右移动【经典】

3489人阅读 评论(0) 收藏 举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select选框</title>
<style>
#div1{
position:relative;
margin-right:10px;
float:left;
}


</style>


<script language="javascript" type="text/javascript" src="../jquery-1.7.1.js"></script>


<script language="javascript" type="text/javascript">


$(document).ready(function (){
//双击将选中的option追加至select2中
$("#select1").dblclick(function (){

$("#select1 option:selected").prependTo("#select2");
});

//双击将选中的option追加至select1中
$("#select2").dblclick(function (){

$("#select2 option:selected").prependTo("#select1");
});

//点击第一个button按钮,将select1中选中的option追加到select2中
$("#btn1").click(function (){
$("#select1 option:selected").prependTo("#select2");
});


//点击第二个button按钮,将select1中的option全部到select2中
$("#btn2").click(function (){
$("#select1 option").prependTo("#select2");
});


//点击第三个button按钮,将select2中选中的option追加到select1中
$("#btn3").click(function (){
$("#select2 option:selected").prependTo("#select1");
});

//点击第四个button按钮,select2中的option全部到select1中
$("#btn4").click(function (){
$("#select2 option").prependTo("#select1");
});

});




</script>
</head>


<body>
<div id="div1">
选框一<br>
<select id="select1" multiple="multiple" style="width:100px; height:100px;">


<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<input type="button" id="btn2" value="全>>" />
<input type="button" id="btn1" value=">>" />
</div>
<div id="div2">
选框二<br>
<select id="select2" multiple="multiple" style="width:100px; height:100px;">




</select>
<br>
<input type="button" id="btn3" value="<<" />
<input type="button" id="btn4" value="<<全" />
</div>
</body>

</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:93238次
    • 积分:1354
    • 等级:
    • 排名:千里之外
    • 原创:45篇
    • 转载:11篇
    • 译文:0篇
    • 评论:13条
    最新评论