首页 > 代码库 > JQ实现选中以后就左右移动
JQ实现选中以后就左右移动
<head>
<meta charset="utf-8" />
<title>select_option移动</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.all {
width: 100%;
height: 200px;
}
.select_1 {
float: left;
width: 100px;
height: 200px;
}
.select_2 {
float: left;
width: 100px;
height: 200px;
}
.btn {
float: left;
width: 66px;
height: 200px;
margin-top: 100px;
}
.btn button {
margin-top: 20px;
width: 66px;
height: 20px;
}
</style>
</head>
<body>
<div class="all">
<div style="height: 200px; width: 10%; float: left; margin-left: 100px; margin-top: 100px;">
<select class="select_1" multiple="multiple">
<option value="http://www.mamicode.com/opt1">选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
<option>选项六</option>
</select>
</div>
<div class="btn">
<button class="btn1">选中的></button>
<button class="btn2">全部>></button>
<button class="btn3">选中的<</button>
<button class="btn4">全部<<</button>
</div>
<div style="height: 200px; width: 10%; float: left; margin-left: 30px; margin-top: 100px;">
<select class="select_2" multiple="multiple"></select>
</div>
</div>
</body>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.min.js" ></script>
<script>
$(function() {
$(‘.btn1‘).click(function() {
$(‘.select_1>option:selected‘).appendTo(‘.select_2‘);
})
$(‘.btn2‘).click(function() {
$(‘.select_1 option‘).appendTo(‘.select_2‘);
})
$(‘.btn3‘).click(function() {
$(‘.select_2>option:selected‘).appendTo(‘.select_1‘);
})
$(‘.btn4‘).click(function() {
$(‘.select_2 option‘).appendTo(‘.select_1‘);
})
})
</script>
JQ实现选中以后就左右移动