jQuery学习14---权限的左右移动

最新推荐文章于 2022-06-16 21:07:30 发布

onyas

最新推荐文章于 2022-06-16 21:07:30 发布

阅读量1k

点赞数

分类专栏： jQuery 文章标签：权限的左右移动

本文链接：https://blog.csdn.net/zheng0518/article/details/9202495

版权

jQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK">
		<title></title>
		<script src="../jquery-1.8.2.js" type="text/javascript"></script>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			$(function()
			{
				$(":button[value=delete]").click(function()
				{	
					//在文档中直接删除最后一个
					//var $li = $("#lis li:last").remove();
					//$("#lis").prepend($li);
					//empty()是将节点清空，等价于innerHTML(""),节点还在
					$("#lis li:last").empty();
				});
				
				
				//权限小练习
				$(":button[value='>']").click(function()
				{
					var $options = $("#all option:selected").remove().removeAttr("selected");
					$("#sel").append($options);
				});
				
				$(":button[value='>>']").click(function()
				{
					$("#all option").remove().removeAttr("selected").appendTo("#sel");
				});
				
				$(":button[value='<']").click(function()
				{
					$("#sel option:selected").removeAttr("selected").appendTo("#all");//appendTo可以实现剪切，粘贴
				});
				
				$(":button[value='<<']").click(function()
				{
					$("#sel option").removeAttr("selected").appendTo("#all");//appendTo可以实现剪切，粘贴
				});
			});
		</script>
	</head>
	<body>
	<!--
		$("#id").append(jQuery对象);在id结束标签之前加入一个jQuery对象，形成子节点
		$("#id").prepend(jQuery对象);在id开结标签之后加入一个jQuery对象，形成子节点
		$("#id").before(jQuery对象);在id开始标签之前加入一个jQuery对象，形成兄弟节点
		$("#id").after(jQuery对象);在id结束标签之后加入一个jQuery对象，形成兄弟节点
		jQuery对象.appendTo($("#id"));把jQuery对象追加到id中，效果与append一样
		jQuery对象.prependTo($("#id"));把jQuery对象添加到id中，效果与prepend一样
	-->
		<ur id="lis">
			<li>小张</li>
			<li>小王</li>
			<li>小李</li>
			<li>小六</li>
		</ur>
		<input type="button" value="delete" />
		<hr/>
		<b>权限小练习</b>
		<select id="all" size="5" multiple="multiple">
			<option>查找</option>
			<option>编辑</option>
			<option>删除</option>
			<option>添加</option>
		</select>
		<input type="button" value=">" />
		<input type="button" value="<" />
		<input type="button" value=">>" />
		<input type="button" value="<<" />
		<select id="sel" size="5" multiple="multiple">
		</select>
	</body>
</html>