JS 实战1（添加、删除）
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title></title> 9 <style> 10 #ListBox1, #ListBox2 { 11 width: 200px; 12 height: 200px; 13 float: left; 14 } 15 </style> 16 17 </head> 18 <body> 19 <form id="form1" runat="server"> 20 <div> 21 <asp:ListBox ID="ListBox1" SelectionMode="Multiple" runat="server"> 22 <asp:ListItem Value="1111">苹果</asp:ListItem> 23 <asp:ListItem Value="222">橘子</asp:ListItem> 24 <asp:ListItem Value="333">香蕉</asp:ListItem> 25 <asp:ListItem Value="444">葡萄</asp:ListItem> 26 <asp:ListItem Value="55">张柯</asp:ListItem> 27 </asp:ListBox> 28 <div style="float: left;"> 29 <input type="button" id="btn1" value="添加>>>" /><br /> 30 <input type="button" id="btn2" value="<<<移除" /> 31 <input type="button" id="btn_ok" value="确定" /> 32 </div> 33 <asp:ListBox ID="ListBox2" runat="server"></asp:ListBox> 34 35 </div> 36 </form> 37 </body> 38 </html> 39 40 <script src="JavaScript.js"></script> 41 <script src="JavaScript2.js"></script>
1 var oBtn1 = document.getElementById("btn1"); 2 3 oBtn1.onclick = function () { 4 //取出ListBox1中的选中项 5 6 var lb1 = document.getElementById("ListBox1"); 7 8 for (var i = 0; i < lb1.options.length; i++) { 9 if (lb1.options[i].selected == true) { 10 document.getElementById("ListBox2").appendChild(lb1.options[i]); 11 } 12 13 } 14 };
1 var oBtn2 = document.getElementById("btn2"); 2 3 oBtn2.onclick = function () { 4 5 var olb2 = document.getElementById("ListBox2"); 6 7 for (var i = 0; i < olb2.options.length; i++) { 8 if (olb2.options[i].selected == true) { 9 var op = document.createElement("option"); 10 op.value = olb2.options[i].value; 11 op.innerHTML = olb2.options[i].innerHTML; 12 13 document.getElementById("ListBox1").appendChild(op); 14 15 } 16 } 17 };
