<!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. 一个App完成入门篇（七）- 完成发现页面

    第七章是入门篇的倒数第二篇文章了,明天整个APP将进入收官. 本节教程主要要教会大家使用二维码扫描和用do_WebView组件加在html页面. 导入项目 do_WebView组件 扫描功能 自定义事 ...

  2. 推荐:图片轮播插件Nivo Slider

          因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的.        ...

  3. 提供程序不支持 DatabaseExists

    如果Oracle CodeFirst模式下要用EFProviderWrapperToolkit,那么会报告以下错误: 提供程序不支持 DatabaseExists. 这个错误是因为Oracle Cod ...

  4. xamarin UWP中MessageDialog与ContentDialog的区别

    MessageDialog与ContentDialog的异同点解析: 相同点一:都是uwp应用上的一个弹窗控件.都能做为弹出应用. 相异点一:所在命名空间不同,MessageDialog在Window ...

  5. 基于zipkin分布式链路追踪系统预研第一篇

    本文为博主原创文章,未经博主允许不得转载. 分布式服务追踪系统起源于Google的论文“Dapper, a Large-Scale Distributed Systems Tracing Infras ...

  6. Elasticsearch5.0 安装问题集锦

    使用Elasticsearch5.0 必须安装jdk1.8 [elsearch@vm-mysteel-dc-search01 bin]$ java -version java version &quo ...

  7. Jetty Maven Plugin配置

    官方文档:http://www.eclipse.org/jetty/documentation/current/jetty-maven-plugin.html#maven-config-https 1 ...

  8. 使用Ado.net执行SP很慢，而用SSMS执行很快

    今天遇到一个问题,有用户反应,在site上打开报表,一直loading,出不来结果. 遇到这种问题,我立刻simulate用户使用Filter Condition,问题repro,看来不是偶然事件,通 ...

  9. for循环或Repeat里面对某个字段进行复杂处理的解决方案

    在后台用一个方法处理

  10. centos6.5 下搭建lamp环境

    一直以为很麻烦,实际操作起来并没有遇到什么问题,yum源是163,php版本是5.3(有点老,以后再更新吧):详细步骤如下: 第一步:安装php mysql apache yum -y install ...