您的位置：首页 > Web前端 > JQuery

jQuery之下拉框左右选择

2015-04-15 18:27 330 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery之下拉框左右选择</title>
<style>
*{margin:0; padding: 0}
body{ text-align: center;}
.wrapper{ width: 1000px; text-align: left; margin:50px auto;}
.centent{float:left; width:140px; margin-right: 10px; text-align:center;}
.centent .btn span{ display: block; height: 28px; line-height: 28px; background-color: #f0f0f0; margin-top:5px; cursor: pointer;}
.centent .btn span.hover{background-color: green; color: #fff;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function(){
//移到右边
$('#add').bind('click',function() {
//获取选中的选项，删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').bind('click',function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').bind('click',function(){
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到右边
$('#remove_all').bind('click',function(){
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').bind('dblclick',function(){
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
$('#select2').bind('dblclick',function(){
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select1'); //追加给对方
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="centent">
<select multiple="multiple" id="select1" style="width:100px;height:160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div class="btn">
<span id="add" >选中添加到右边>></span>
<span id="add_all" >全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8">选项8</option>
</select>
<div class="btn">
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航