search

Home >Web Front-end >JS Tutorial >Select implements addition and deletion of left and right lists

Select implements addition and deletion of left and right lists

巴扎黑
巴扎黑Original
2016-12-06 11:33:22987browse

<!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>


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：validate automatic verificationNext article：validate automatic verification

Related articles

See more