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 相关文章推荐
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
vue实现底部菜单功能
Jul 24 Javascript
详解微信小程序网络请求接口封装实例
May 02 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数组输出html表格的方法
2014/02/24 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
php防止sql注入的方法详解
2017/02/20 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
Python中__call__用法实例
2014/08/29 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Python切片操作深入详解
2018/07/27 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
基于python3实现倒叙字符串
2020/02/18 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
工地门卫岗位职责
2013/12/30 职场文书
成本会计岗位职责
2015/02/03 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
实习证明格式范文
2015/06/16 职场文书
《给予树》教学反思
2016/03/03 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
python 管理系统实现mysql交互的示例代码
2021/12/06 Python