js实际运用
實現效果：點擊添加，左邊框中的選中項消失，添加到右邊的框中；點擊移除，右邊的不消失，但會增加到左邊的框中。
代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style>#ListBox1, #ListBox2 {width: 200px;height: 200px;float: left;}</style></head> <body><form id="form1" runat="server"><div><asp:ListBox ID="ListBox1" SelectionMode="Multiple" runat="server"><asp:ListItem Value="1111">蘋果</asp:ListItem><asp:ListItem Value="222">橘子</asp:ListItem><asp:ListItem Value="333">香蕉</asp:ListItem><asp:ListItem Value="444">葡萄</asp:ListItem><asp:ListItem Value="55">張柯</asp:ListItem></asp:ListBox><div style="float: left;"><input type="button" id="btn1" value="添加>>>" /><br /><input type="button" id="btn2" value="<<<移除" /><input type="button" id="btn_ok" value="確定" /></div><asp:ListBox ID="ListBox2" runat="server"></asp:ListBox></div></form> </body> </html><script src="JavaScript.js"></script> <script src="JavaScript2.js"></script>兩段js碼，第一個為添加，第二個為移除；移除中，創建一個新對象，將原對象的值賦給新對象，添加新對象，則原對象不會消失
var oBtn1 = document.getElementById("btn1");oBtn1.onclick = function () {//取出ListBox1中的選中項var lb1 = document.getElementById("ListBox1");for (var i = 0; i < lb1.options.length; i++) {if (lb1.options[i].selected == true) {document.getElementById("ListBox2").appendChild(lb1.options[i]);}} }; var oBtn2 = document.getElementById("btn2");oBtn2.onclick = function () {var olb2 = document.getElementById("ListBox2");for (var i = 0; i < olb2.options.length; i++) {if (olb2.options[i].selected == true) {var op = document.createElement("option");op.value = olb2.options[i].value;op.innerHTML = olb2.options[i].innerHTML;document.getElementById("ListBox1").appendChild(op);}} };?
轉載于:https://www.cnblogs.com/wy1992/p/6278639.html
總結
- 上一篇： 使用tomcat的jndi方式连接mys
- 下一篇： 2017寒假第一篇随笔（寒假作业一）