用jQuery实现multiple select(列表框)左右添加和删除功能

最新推荐文章于 2021-09-21 00:50:54 发布

hemingwang0902

最新推荐文章于 2021-09-21 00:50:54 发布

阅读量6.9k

点赞数

分类专栏： javascript 文章标签： jquery function button delete xhtml input

本文链接：https://blog.csdn.net/hemingwang0902/article/details/4153198

版权

javascript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>实现multiple select(列表框)左右添加和删除功能</title>
		<style>
                   <!--
			select{
				text-align:center;
				width:300px;
				height:150px;
			}
		   -->
                </style>		
                <script type="text/javascript" src="jquery.min.js" ></script>
		<script type="text/javascript">
                   <!--
			/**
			  *动态的给左边的下拉列表创建选项
			  *具体情况可以从数据库读取数据动态创建选项
			  */
			$(document).ready(function(){
				$("select").attr("multiple", "multiple"); //设置可以多选
				for(var i=1;i<=5;i++)
				{
				   $("#unSelectedServer").append("<option value='"+i+"'>192.168.1.2"+i+"</option>");  
				} 
			})
			
			//给添加和添加所有按钮添加onclick事件
			$(function(){
			     $(":button[id^=add]").click(function(){
					 var toAdds;
					 if($(this).attr("id") == "addAll"){ //添加全部
						toAdds = $("#unSelectedServer option");
					 }else{ //添加选中
						toAdds = $("#unSelectedServer option:selected");
						if(toAdds.length == 0){
							alert("请选择要添加的服务器！");
							return;
						}
					 }
					toAdds.each(function(){
						$("#selectedServer").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
						$(this).remove();  
					});
				})
			})
			
			//给删除和删除所有按钮添加onclick事件
			$(function(){ 
			    $(":button[id^=delete]").click(function(){
					var todeletes;
					if($(this).attr("id") == "deleteAll"){ //删除全部
						todeletes = $("#selectedServer option");
					 }else{ //删除选中
					 	todeletes = $("#selectedServer option:selected");
						if(todeletes.length == 0){
							alert("请选择要删除服务器！");
							return;
						}
					 }
			        todeletes.each(function(){
			            $("#unSelectedServer").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
			            $(this).remove();  
			        })
			    })
			})
		// -->
            </script>
	</head>
	
	<body>
		<table width="90%" border="0" cellpadding="0" cellspacing="1" align="center">
			<tr>
				<td width="40%" align="right">
					<select id="unSelectedServer"></select>
				</td>
				<td align="center" width="20%">
					<input type="button" id="add" value=">" />
					<br /><br />
					<input type="button" id="addAll" value=">>" />
					<br /><br />
					<input type="button" id="delete" value="<" />
				  	<br/> <br/>
		          	        <input type="button" id="deleteAll" value="<<" />
				</td>
				<td class="black" width="40%">
				        <select id="selectedServer"></select>
				</td>
		 	</tr> 
		</table>
	</bdoy>
</html>

hemingwang0902

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用jQuery实现multiple select(列表框)左右添加和删除功能

实现multiple select(列表框)左右添加和删除功能 select{ text-align:center; width:300px; height:150px; } -->
复制链接

扫一扫

专栏目录