jquery select多选框的左右移动 具体实现代码


Posted in Javascript onJuly 03, 2013
<!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=gb2312" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
<script type="text/javascript"> 
/**  
 *动态的给左边的下拉列表创建选项  
 *具体情况可以从数据库读取数据动态创建选项  
 */ 
$(document).ready(function(){  

for(var i=1;i<=5;i++)  


{  


$("#fb_list").append("<option value='"+i+"'>公开招标小型机采购00"+i+"</option>");   


}  
})  
$(function(){  

$("#add").click(function(){  



 if($("#fb_list option:selected").length>0)  



 {  





 $("#fb_list option:selected").each(function(){  







$("#select_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");  







$(this).remove();   





 })  



 }  



 else 



 {  





 alert("请选择要添加的分包!");  



 }  

 })  
})  
$(function(){  



$("#delete").click(function(){  





 if($("#select_list option:selected").length>0)  





 {  







 $("#select_list option:selected").each(function(){  










 $("#fb_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");  










 $(this).remove();   







 })  





 }  





 else 





 {  







 alert("请选择要删除的分包!");  





 }  


 })  
}) 
</script> 
</head> 
<body> 
<table width="95%" cellpadding="0" align="center" class="listshow" border="1" cellspacing="0">  
<tr>  

<td colspan="4" align="center">选择分包</td>  

</tr>  
<tr>  
 <td class="black" width="30%" align="center" height="150">  
 <select id="fb_list" multiple="multiple" style="text-align:center;width:300px;height:150px;"></select>   
 </td>  

<td align="center" width="5%">  


<input type="button" id="add" value="添加>>" />  



<br/>  



<br/>  



<input type="button" id="delete" value="<<删除" />  


</td>  


<td class="black" width="30%" align="center">  


<select id="select_list" multiple="multiple" style=" text-align:center;width:300px;height:150px;"></select>  


</td>  
</tr>  
</table> 
</body> 
</html>
Javascript 相关文章推荐
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 #Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 #Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 #Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 #Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 #Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 #Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 #Javascript
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
python中遍历文件的3个方法
2014/09/02 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
python 多进程队列数据处理详解
2019/12/23 Python
python如何输出反斜杠
2020/06/18 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
2014年情人节活动方案
2014/02/16 职场文书
小学少先队活动总结
2015/05/08 职场文书
小学生教师节广播稿
2015/08/19 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python