js实际运用

实现效果：点击添加，左边框中的选中项消失，添加到右边的框中；点击移除，右边的不消失，但会增加到左边的框中。

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>



"http://www.w3.org/1999/xhtml">
"server">
    "Content-Type" content="text/html; charset=utf-8" />
    
    



    
"form1" runat="server">
        

            "ListBox1" SelectionMode="Multiple" runat="server">
                "1111">苹果
                "222">橘子
                "333">香蕉
                "444">葡萄
                "55">张柯
            
            
"float: left;">
                "button" id="btn1" value="添加>>>" />

                "button" id="btn2" value="<<<移除" />
                "button" id="btn_ok" value="确定" />
            
            "ListBox2" runat="server">

        
    

两段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