js动态的把左边列表添加到右边，可删除。

￡神魔★判官ぃ 2023-06-12 05:27 21阅读 0赞

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

更多专业前端知识，请上 **【猿2048】www.mk2048.com**