zoukankan      html  css  js  c++  java
  • js动态的把左边列表添加到右边,可删除。

    <!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;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;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>
    
  • 相关阅读:
    函数7—递归
    函数6—内置函数
    PHP.6-PHP环境搭建(Windows环境下)-LAMP
    PHP.5-DIV+CSS布局网站首页实例
    PHP.4-DIV+CSS标准网页布局准备工作(下)
    PHP.3-DIV+CSS标准网页布局准备工作(上)
    PHP.2-LAMP平台介绍及网站的工作原理
    小白日记36:kali渗透测试之Web渗透-手动漏洞挖掘(二)-突破身份认证,操作系统任意命令执行漏洞
    PHP.1-网站开发概述
    小白日记35:kali渗透测试之Web渗透-手动漏洞挖掘(一)-默认安装引发的漏洞
  • 原文地址:https://www.cnblogs.com/yangzailu/p/6070436.html
Copyright © 2011-2022 走看看