select实现左右列表的添加和删除-js教程-PHP中文网

select实现左右列表的添加和删除

巴扎黑

发布： 2016-12-06 11:33:22

原创

972 人浏览过

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>下拉列表</title> 
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<style type="text/css"> 
.centent{ 
float: left; 
width: 300px; 
height: 200px; 
} 
span{ 
background-color:yellow; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$("#add").click(function(){ 
/* //获取下拉框选中的选项 
$option=$("#s1 option:selected"); 
//删除下拉框选中的选项 
var $remove=$option.remove(); 
//将要删除的option追加给对方 
$remove.appendTo("#s2"); */ 
//删除和追加操作可以使用appendTo()方法直接完成 
$option=$("#s1 option:selected"); 
$option.appendTo("#s2"); 
});	
//将全部的option追加给对方 
$("#add_all").click(function(){ 
//获取所有的option 
$option=$("#s1 option"); 
//追加给对方 
$option.appendTo("#s2"); 
}); 
//双击进行追加给对方 
$("#s1").dblclick(function(){ 
//获取双击选中的选项 
var $option=$("option:selected",this); 
//追加给对方 
$option.appendTo("#s2"); 
}); 
//选中删除到左边 
$("#del").click(function(){ 
$option=$("#s2 option:selected"); 
$option.appendTo("#s1"); 
}); 
//全部删除到左边 
$("#del_all").click(function(){ 
$option=$("#s2 option"); 
$option.appendTo("#s1"); 
}); 
//双击删除 
$("#s2").dblclick(function(){ 
$option=$("option:selected",this); 
$option.appendTo("#s1"); 
}); 
});	
</script> 
</head> 
<body> 
<div class="centent"> 
<select multiple  id="s1" style="width:120px;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> 
<option value="8">选项8</option> 
</select> 
<div> 
<span id="add">选中添加到右边&gt;&gt;</span><br> 
<span id="add_all">全部添加到右边&gt;&gt;</span> 
</div> 
</div> 
<div class="centent"> 
<select multiple  id="s2" style="width:120px;height:160px;"> 

</select> 
<div> 
<span id="del">&lt;&lt;选中删除到左边</span> <br> 
<span id="del_all">&lt;&lt;全部删除到左边</span> 
</div> 
</div> 
</body> 
</html>

登录后复制