基于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与CSS复习(三)
Jun 29 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
javascript使用call调用微信API
Dec 15 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
js实现图片360度旋转
Jan 22 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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中使用hidef扩展代替define提高性能
2015/04/09 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
js命名空间写法示例
2015/12/18 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
使用python3.5仿微软记事本notepad
2016/06/15 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
Jar包的作用是什么
2014/03/30 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
单位人事专员介绍信
2014/01/11 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
2015年信访工作总结
2015/04/07 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
Redis高并发缓存架构性能优化
2022/05/15 Redis
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers