<!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>

  <title> new document </title>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

  <meta name="author" content="" />

  <meta name="keywords" content="" />

  <meta name="description" content="" />

  <link rel="stylesheet" type="text/css" href="" />

  <style type="text/css"></style>

  <script type="text/javascript"></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>

<script src="jquery-1.7.1.min.js"></script>

<script>

/**

　*动态的给左边的下拉列表创建选项

　*具体情况可以从数据库读取数据动态创建选项

　*/

	$(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>

 </body>

</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. LVS原理与使用（1）

    负载均衡,无论是否真正了解过,但我相信所有跟编程打交道的读者都有听说.同时,它(负载均衡)也是被认为一个大型网站的标识性技术之一(但负载均衡的作用肯定不止这点用途).虽然网上也有不少关于LVS配置实用 ...

  2. .NET 基础 一步步 一幕幕 [.NET 简介]

    .NET 简介 .NET是 Microsoft XML Web services 平台.是微软用来实现XML,Web Services,SOA(面向服务的体系结构service-oriented ar ...

  3. crossplatfrom---electron入门教程

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  4. iOS-证书申请

    本文讲述发布证书的申请 首先登陆https://developer.apple.com(99美元账号) a.点击页面右上角 b.进入 c.选择证书类型 distribution,选择添加 d.点击+后 ...

  5. iOS常见用户头像的圆形图片裁剪常见的几种方法

    在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...

  6. c#属性中的get和set属性

    get是给属性赋值,set是取属性的值. get.set用法: 一是隐藏组件或类内部的真是成员: 二是用来建立约束的,比如,实现“有我没你”这种约束: 三是用来响应属性变化事件,当属性变化是做某事,只 ...

  7. IOS学习之NSNotificationCenter消息机制

    NSNotificationCenter是 Cococa消息中心,统一管理单进程内不同线程的消息通迅. 添加观察者接收通知: //添加通知中心观察者 [[NSNotificationCenter de ...

  8. IOS数据存储之文件沙盒存储

    前言: 之前学习了数据存储的NSUserDefaults,归档和解档,对于项目开发中如果要存储一些文件,比如图片,音频,视频等文件的时候就需要用到文件存储了.文件沙盒存储主要存储非机密数据,大的数据. ...

  9. JQuery利用sort对DOM元素进行排序

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...

  10. VS 2015 Enterprise第二大坑

    前言 继上篇文章之后,你会继续跌进大坑,这个坑困扰我一上午,同时也会让你大跌眼镜,如果你遇到了,那么恭喜你提升自身能力和解决能力的时机到了,当然你可以通过本文继续少走不必要的弯路[我也是无意中发现的捷 ...