基于jquery实现select选择框内容左右移动添加删除代码分享


Posted in Javascript onAugust 25, 2015

本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下:
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!

运行效果图:                                  ----------------------查看效果-----------------------

基于jquery实现select选择框内容左右移动添加删除代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select选择框内容左右移动添加删除代码</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;outline:none;}
a,img{border:0;}
body{font:12px/normal "microsoft yahei";}
.selectbox{width:500px;height:220px;margin:100px auto;}
.selectbox div{float:left;}
.selectbox .select-bar{padding:0 20px;}
.selectbox .select-bar select{width:150px;height:200px;border:1px #A0A0A4 solid;padding:4px;font-size:14px;font-family:"microsoft yahei";}
.btn-bar{}
.btn-bar p{margin-top:16px;}
.btn-bar p .btn{width:50px;height:30px;cursor:pointer;font-family:simsun;font-size:14px;}
</style>
<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>
<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="A5源码">A5源码</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>
<div style="text-align:center;">
</div>
</body>
</html>

以上就是为大家分享的select选择框内容左右移动添加删除代码,希望大家可以喜欢。

Javascript 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 #Javascript
基于jQuery实现在线选座之高铁版
Aug 24 #Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 #Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 #Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 #Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 #Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 #Javascript
You might like
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP 第一节 php简介
2012/04/28 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
Python进阶篇之字典操作总结
2016/11/16 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Python 支持向量机分类器的实现
2020/01/15 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
公司成立感言
2014/01/11 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
捐书倡议书
2014/08/29 职场文书
安全承诺书格式范本
2015/04/28 职场文书
行政复议决定书
2015/06/24 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
python数字图像处理:图像简单滤波
2022/06/28 Python