<!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. 高灵活度，高适用性，高性能，轻量级的 ORM 实现

    ORM(Object-Relational Mapping 对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,目的是提供易于理解的模型化数据的方法. ORM虽然有诸多好处,但是在实 ...

  2. 【javascript 技巧】谈谈setTimeout的作用域以及this的指向问题

    setTimeout的用法详见:http://www.w3school.com.cn/htmldom/met_win_settimeout.asp 是的,setTimeout的常见用法是让某个方法延迟 ...

  3. 搞懂 SynchronizationContext（第一部分）【翻译】

    SynchronizationContext -MSDN 很让人失望 我不知道为什么,目前在.Net下关于这个类只有很少的资料.MSDN文档也只有很少的关于如何使用SynchronizationCon ...

  4. C++ 回调函数 实现 的测试代码

    最近项目里使用了异步Socket,使用的是完成端口做的e; Accept,receive,send 等完全的异步实现(多线程) 然后 又要多个端口使用, 后来想到包装下完成端口Socket,然后当有事 ...

  5. php的mysql\mysqli\PDO(二)mysqli

    原文链接:http://www.orlion.ga/1147/ mysqli有面向对象风格和面向过程风格,个人感觉还是用面向对象风格比较好(毕竟是面向对象) 1.mysqli::_construct( ...

  6. 升级到Windows10

    1.Windows10的优点 2.需要安装的软件 实用软件: Firefox浏览器 Chrome浏览器 有道云笔记 Adobe Reader Adobe Flash Adobe PhotoShop 编 ...

  7. C#线程同步手动重置事件——ManualResetEvent

    和AutoResetEvent类的区别是,Manual一旦set后不会自动reset,会放行所有waitone的线程,而autoresetevent每一次set之后只会放行一个waitone的线程,然 ...

  8. geotrellis使用（十九）spray-json框架介绍

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 spray-json简介 spray-json使用 ...

  9. windows配置xhprof，PHP性能分析工具

    本来以为配置这么一个工具不会费很大的力气,后面发现完全不是. 一.小插曲 早上显示电脑不能显示虚拟目录下的所有域名,但是能打开localhost,数据库连接也不行了.这个问题纠缠了我一个上午.对了还有 ...

  10. C#异常处理的几个原则

    转载来自:http://www.oecp.cn/hi/LiuBP/blog/2312 在开发应用程序的时候,异常处理是非常的重要的,我找到一些异常处理准则,将它共享出来,如有不同意见,欢迎提出来一起探 ...