<!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. iOS开发系列--C语言之预处理

    概述 大家都知道一个C程序的运行包括编译和链接两个阶段,其实在编译之前预处理器首先要进行预处理操作,将处理完产生的一个新的源文件进行编译.由于预处理指令是在编译之前就进行了,因此很多时候它要比在程序运 ...

  2. [.net 面向对象程序设计深入]（2）UML——在Visual Studio 2013/2015中设计UML用例图

    [.net 面向对象程序设计深入](2)UML——在Visual Studio 2013/2015中设计UML用例图  1.用例图简介 定义:用例图主要用来描述“用户.需求.系统功能单元”之间的关系. ...

  3. 辛巴学院-Unity-剑英陪你零基础学c#系列(三)计算与类型

    辛巴学院:正大光明的不务正业. 中秋节快乐,每逢佳节倍思亲,尤其是那素未谋面的老婆,对吧,屌丝们.   今天我们来探索一下C#里面奇怪的计算,奇怪的类型. 奇怪的计算 当我刚刚接触计算机编程的时候,一 ...

  4. SharpFileDB - a file database for small apps

    SharpFileDB - a file database for small apps 本文中文版在此处. I'm not an expert of database. Please feel fr ...

  5. 3dmax模型制作备忘录

    md2导出: http://thegreystudios.com/blog/?p=278 http://wenku.baidu.com/view/4d5652e2524de518964b7d89.ht ...

  6. Step by step Dynamics CRM 2011升级到Dynamics CRM 2013

    原创地址:http://www.cnblogs.com/jfzhu/p/4018153.html 转载请注明出处 (一)检查Customizations 从2011升级到2013有一些legacy f ...

  7. C语言 · 求矩阵各个元素的和

    问题描述 这里写问题描述. 输入格式 测试数据的输入一定会满足的格式. 例:输入的第一行包含两个整数n, m,分别表示矩阵的行数和列数.接下来n行,每行m个正整数,表示输入的矩阵. 输出格式 要求用户 ...

  8. Atitit xml命名空间机制

    Atitit xml命名空间机制 命名冲突1 使用前缀来避免命名冲突2 使用命名空间(Namespaces)2 XML Namespace (xmlns) 属性2 默认的命名空间(Default Na ...

  9. 移动开发--Hybrid和Native混合开发-->HybridApp 、NativeApp、WebApp

    1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等).金融(各手机行业.P2P借贷等).医疗(智慧医疗).交通(滴滴.Uber等).教育(慕课网 ...

  10. SQL Server中的高可用性（1）----高可用性概览

        自从SQL Server 2005以来,微软已经提供了多种高可用性技术来减少宕机时间和增加对业务数据的保护,而随着SQL Server 2008,SQL Server 2008 R2,SQL ...