1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title> new document </title>
  5.   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  6.   <meta name="author" content="" />
  7.   <meta name="keywords" content="" />
  8.   <meta name="description" content="" />
  9.   <link rel="stylesheet" type="text/css" href="" />
  10.   <style type="text/css"></style>
  11.   <script type="text/javascript"></script>
  12.  </head>
  13.  
  14.  <body>
  15.   <table width="95%" cellpadding="0" align="center" class="listshow" border="1" cellspacing="0">
  16. 		<tr>
  17. 　　		<td colspan="4" align="center">选择分包</td>
  18. 　　	</tr>
  19. 		<tr>
  20. 　			<td class="black" width="30%" align="center" height="150">
  21. 　				<select id="fb_list" multiple="multiple"　style="text-align:center;width:300px;height:150px;">
  22. 　　　　　</select>　
  23. 　　　　</td>
  24. 　　　　<td align="center" width="5%">
  25. 　　　　<input type="button" id="add" value="添加>>" />
  26. 　　　　　　<br/>
  27. 　　　　　　<br/>
  28. 　　　　　　<input type="button" id="delete" value="<<删除" />
  29. 　　　　</td>
  30. 　　　　<td class="black" width="30%" align="center">
  31. 　　　　<select id="select_list" multiple="multiple" style=" text-align:center;width:300px;height:150px;">
  32. 　　　　　　</select>
  33. 　　　　</td>
  34. 		</tr>
  35. </table>
  36.  
  37. <script src="jquery-1.7.1.min.js"></script>
  38. <script>
  39. /**
  40. 　*动态的给左边的下拉列表创建选项
  41. 　*具体情况可以从数据库读取数据动态创建选项
  42. 　*/
  43. 	$(document).ready(function(){
  44. 　　　　for(var i=1;i<=5;i++)
  45. 　　　　{
  46. 　　　　　　　$("#fb_list").append("<option value='"+i+"'>公开招标小型机采购00"+i+"</option>");　
  47. 　　　　}
  48. 		})
  49. 	$(function(){
  50. 　　	$("#add").click(function(){
  51. 　　　　　　　if($("#fb_list option:selected").length>0)
  52. 　　　　　　　{
  53. 　　　　　　　　　　　$("#fb_list option:selected").each(function(){
  54. 　　　　　　　　　　　　　　$("#select_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
  55. 　　　　　　　　　　　　　　$(this).remove();　
  56. 　　　　　　　　　　　})
  57. 　　　　　　　}
  58. 　　　　　　　else
  59. 　　　　　　　{
  60. 　　　　　　　　　　　alert("请选择要添加的分包！");
  61. 　　　　　　　}
  62. 　　　})
  63. })
  64.         $(function(){
  65. 　　　　　　$("#delete").click(function(){
  66. 　　　　　　　　　　　if($("#select_list option:selected").length>0)
  67. 　　　　　　　　　　　{
  68. 　　　　　　　　　　　　　　　$("#select_list option:selected").each(function(){
  69. 　　　　　　　　　　　　　　　　　　　　　$("#fb_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
  70. 　　　　　　　　　　　　　　　　　　　　　$(this).remove();　
  71. 　　　　　　　　　　　　　　　})
  72. 　　　　　　　　　　　}
  73. 　　　　　　　　　　　else
  74. 　　　　　　　　　　　{
  75. 　　　　　　　　　　　　　　　alert("请选择要删除的分包！");
  76. 　　　　　　　　　　　}
  77. 　　　　　})
  78. })
  79. </script>
  80.  </body>
  81. </html>

js动态的把左边列表添加到右边，可删除。的更多相关文章

  1. js动态的把左边列表添加到右边，可上下移动。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 关于如何利用原生js动态给一个空对象添加属性以及属性值

    首先,回忆一下,访问对象属性一共有两种方法:点获取法和方括号获取法.而我们最常用的就是点获取法了.但是当我们遇到需要给对象动态添加属性和属性值时,点获取法好像就不太好用了,尤其是我们不知道属性名的时候 ...

  3. js动态的给json对象添加新的元素

    把{name:"xxx",age:"xxx"}变成{name:"xxx",age:"xxx",value:"x ...

  4. 【记录】【springboot】动态定时任务ScheduledFuture，可添加、修改、删除

    这里只演示添加和删除任务的,因为修改就是删除任务再添加而已. 方便演示,任务就是每3秒打印 1.没有任务 后台 2.添加一个任务 3.再添加一个任务 4.删除一个任务 5.再添加一个任务 6.代码 运 ...

  5. 下拉刷新列表添加SwipeDismissListViewTouchListener实现滑动删除某一列。

    <Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github上的 ...

  6. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  7. js动态添加事件-事件委托

    作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

  8. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

  9. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

随机推荐

  1. 玩转Windows服务系列——Windows服务启动超时时间

    最近有客户反映,机房出现断电情况,服务器的系统重新启动后,数据库服务自启动失败.第一次遇到这种情况,为了查看是不是断电情况导致数据库文件损坏,从客户的服务器拿到数据库的日志,进行分析. 数据库工作机制 ...

  2. .Net组件程序设计之远程调用(一)

    .Net组件程序设计之远程调用(一) 1应用程序域 我们知道我们写的C#代码是在操作系统逻辑体系结构中最上层的,然而操作系统本身是不会认识C#代码的,它只认识机器代码.那我们写的程序经过编译后是编译成 ...

  3. 如何给CentOS安装字体库

    很多时候,我们需要做一些图像生成工作(譬如验证码之类的),这时候,我们一般都需要用到系统的字体库.但事情却总非尽善人意,我们所使用的Linux操作系统无法像Windows操作系统那样足够“旗舰”,字体 ...

  4. 2013 duilib入门简明教程 -- 部分bug (11)

     一.WindowImplBase的bug     在第8个教程[2013 duilib入门简明教程 -- 完整的自绘标题栏(8)]中,可以发现窗口最大化之后有两个问题,     1.最大化按钮的样式 ...

  5. PHP中的list()说明

    list() 用于在一次操作中给一组变量赋值. 注释:list()只用于数字索引的数组,且假定数字索引从 0 开始. 说明 list() 用数组中的元素为一组变量赋值. 注意,与 array() 类似 ...

  6. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  7. 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

    × 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...

  8. Android实现不重复启动APP的方法

    转载博客:http://blog.sina.cn/dpool/blog/s/blog_5de73d0b0102vpai.html?utm_source=bshare&utm_campaign= ...

  9. java Proxy(代理机制)

    我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于IoC,依赖注入就不用多说了,而对于Spring的核心AOP来说,我们不但要知道怎么通过AOP来满足的我们的功能,我们更需要学习 ...

  10. Javascript优化细节：短路表达式

    什么是短路表达式? 短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程 ...