首页 > 代码库 > 双列表-左右选择
双列表-左右选择
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>双列表</title>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.6.4.min.js"></script>
<!--
<script type="text/javascript" src="http://www.mamicode.com/js/hdw.js"></script>-->
</head>
<style>
/* CSS Document */
* { padding:0; margin:0;}
body { font-size:12px; padding:100px;}
select { width:100px; height:167px; padding:5px;}
.content { float:left; text-align:center; margin-right:10px;}
span { display:block; width:100px; background:#eee; cursor:pointer; border:1px solid #ccc; padding:5px 0; margin:5px 0;}
</style>
<body>
<div class="content">
<select multiple="multiple" id="select1">
<option value="http://www.mamicode.com/1">选项1</option>
<option value="http://www.mamicode.com/2">选项2</option>
<option value="http://www.mamicode.com/3">选项3</option>
<option value="http://www.mamicode.com/4">选项4</option>
<option value="http://www.mamicode.com/5">选项5</option>
<option value="http://www.mamicode.com/6">选项6</option>
<option value="http://www.mamicode.com/7">选项7</option>
</select>
<span id="add">选中右移>></span>
<span id="add_all">全部右移>></span>
</div>
<div class="content">
<select multiple="multiple" id="select2">
</select>
<span id="remove">选中左移>></span>
<span id="remove_all">全部左移>></span>
</div>
<script>
$("#add").click(function () {
$("#select1 option:selected").appendTo("#select2");
});
$("#add_all").click(function(){
$("#select1 option").appendTo("#select2");
});
$("#remove").click(function () {
$("#select2 option:selected").appendTo("#select1");
});
$("#remove_all").click(function(){
$("#select2 option").appendTo("#select1");
});
$("#select1").dblclick(function () {
$("#select1 option:selected").appendTo("#select2");
});
$("#select2").dblclick(function () {
$("#select2 option:selected").appendTo("#select1");
});
</script>
</body>
</html>
双列表-左右选择