基于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 相关文章推荐
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
vue组件中的数据传递方法
May 14 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 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核心代码分析require和include的区别
2011/01/02 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
BootStrap的双日历时间控件使用
2017/07/25 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
webpack4.0 入门实践教程
2018/10/08 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
深入了解NumPy 高级索引
2020/07/24 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
主题酒店策划书
2014/01/28 职场文书
会计求职信怎么写
2015/03/20 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS