实现了下拉框中内容的左右移动,支持双击移动
结果:
代码:
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*
{
margin:0;
padding:0;
}
div.centent
{
float:left;
text-align:center;
margin:10px;
}
span
{
display:block;
background:#ff6633;
padding:2px;
margin:2px;
font-size:0.6em;
cursor:pointer;
}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
//选中元素移动到右边
$("#add").click(function(){
$("#select1 option:checked").appendTo("#select2");
});
//选中元素移动到左边
$("#remove").click(function(){
$("#select2 option:checked").appendTo("#select1");
});
//全部移到右边
$("#addAll").click(function(){
$("#select1 option").appendTo("#select2");
});
//全部移到左边
$("#removeAll").click(function(){
$("#select2 option").appendTo("#select1");
})
//双击选项
$("#select1").dblclick(function(){
$("option:selected").appendTo("#select2");
})
$("#select2").dblclick(function(){
$("option:selected").appendTo("#select1");
})
})
</script>
</head>
<body>
<div class="centent">
<select multiple="multiple" id="select1"style="width:5em; height:11em;">
<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>
<option value="8">选项8</option>
</select>
<div>
<span id="add">选中添加到右边>></span>
<span id="addAll">全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" style="width:5em; height:11em;">
<option value="8">选项9</option>
</select>
<div>
<span id="remove">选中添加到左边<<</span>
<span id="removeAll">全部添加到左边<<</span>
</div>
</div>
</body>
</html>
学习自《锋利的JQuery》第五章。