Heim > Artikel > Web-Frontend > Auswählen implementiert das Hinzufügen und Löschen von linken und rechten Listen

Auswählen implementiert das Hinzufügen und Löschen von linken und rechten Listen

巴扎黑Original: 2016-12-06 11:33:22973Durchsuche

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Validieren Sie die automatische VerifizierungNächster Artikel：Validieren Sie die automatische Verifizierung

In Verbindung stehende Artikel

Mehr sehen