基于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使用之标记元素属性用法实例
Jan 19 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
js实现3D旋转效果
Aug 18 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
Ajax实现页面无刷新留言效果
Mar 24 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
用javascript实现画板的代码
2007/09/05 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Python 多维List创建的问题小结
2019/01/18 Python
国税会议欢迎词
2014/01/16 职场文书
总经理司机职责
2014/02/02 职场文书
诚信考试倡议书
2014/04/15 职场文书
自我查摆剖析材料
2014/10/11 职场文书
学生评语集锦
2015/01/04 职场文书
酒店前台岗位职责
2015/04/16 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
党员读书活动心得体会
2016/01/14 职场文书
资产移交协议书
2016/03/24 职场文书
Python实现打乒乓小游戏
2021/09/25 Python