select选择框内容左右移动添加删除栏目JS代码

最新推荐文章于 2021-12-23 13:37:22 发布

Tiamo_jasmine

最新推荐文章于 2021-12-23 13:37:22 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/qq_42094072/article/details/81084527

版权

我也不是很会讲！看下效果！！！

然后就直接copy代码吧！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select选择框内容左右移动添加删除栏目JS代码</title>
<meta name="keywords" content="js特效,js栏目移动,栏目左右移动,select选择框,网页特效" />
<meta name="description" content="一款select选择框内容左右移动添加删除栏目JS代码网页特效，该特效基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//移到右边
	$('#add').click(function(){
		//先判断是否有选中
		if(!$("#select1 option").is(":selected")){			
			alert("请选择需要移动的选项")
		}
		//获取选中的选项，删除并追加给对方
		else{
			$('#select1 option:selected').appendTo('#select2');
		}	
	});
	
	//移到左边
	$('#remove').click(function(){
		//先判断是否有选中
		if(!$("#select2 option").is(":selected")){			
			alert("请选择需要移动的选项")
		}
		else{
			$('#select2 option:selected').appendTo('#select1');
		}
	});
	
	//全部移到右边
	$('#add_all').click(function(){
		//获取全部的选项,删除并追加给对方
		$('#select1 option').appendTo('#select2');
	});
	
	//全部移到左边
	$('#remove_all').click(function(){
		$('#select2 option').appendTo('#select1');
	});
	
	//双击选项
	$('#select1').dblclick(function(){ //绑定双击事件
		//获取全部的选项,删除并追加给对方
		$("option:selected",this).appendTo('#select2'); //追加给对方
	});
	
	//双击选项
	$('#select2').dblclick(function(){
		$("option:selected",this).appendTo('#select1');
	});
	
});
</script>
</head>
<body class="keBody">
<h1 class="keTitle">select选择框内容左右移动添加删除栏目JS代码</h1>
<div class="kePublic">
<!--效果html开始-->
<div class="selectbox">
<div class="select-bar">
    <select multiple="multiple" id="select1">
        <option value="超级管理员">超级管理员</option>
        <option value="普通管理员">普通管理员</option>
        <option value="信息发布员">信息发布员</option>
        <option value="财务管理员">财务管理员</option>
        <option value="产品管理员">产品管理员</option>
        <option value="资源管理员">资源管理员</option>
        <option value="系统管理员">系统管理员</option>
        <option value="超级管理员">超级管理员</option>
        <option value="普通管理员">普通管理员</option>
        <option value="信息发布员">信息发布员</option>
        <option value="财务管理员">财务管理员</option>
        <option value="产品管理员">产品管理员</option>
        <option value="资源管理员">资源管理员</option>
        <option value="IT工作者">IT工作者</option>
		<option value="项目提案者">项目提案者</option>
    </select>
</div>

<div class="btn-bar">
    <p><span id="add"><input type="button" class="btn" value=">" title="移动选择项到右侧"/></span></p>
    <p><span id="add_all"><input type="button" class="btn" value=">>" title="全部移到右侧"/></span></p>
    <p><span id="remove"><input type="button" class="btn" value="<" title="移动选择项到左侧"/></span></p>
    <p><span id="remove_all"><input type="button" class="btn" value="<<" title="全部移到左侧"/></span></p>
</div>
<div class="select-bar">
    <select multiple="multiple" id="select2"></select>
</div>	
</div>
<!--效果html结束-->
<div class="clear"></div>
</div>
<div class="mKeBanner"><script src='/plus/ad_js.php?aid=22' language='javascript'></script></div>
</body>
</html>

Tiamo_jasmine

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
select选择框内容左右移动添加删除栏目JS代码

我也不是很会讲！看下效果！！！然后就直接copy代码吧！&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/199...
复制链接

扫一扫