js实际运用

Posted 游称

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);

        }
    }
};

 

以上是关于js实际运用的主要内容,如果未能解决你的问题,请参考以下文章

XSS:如何从 C# 中的字符串中删除 JS 片段?

为什么我不能在此片段中生成唯一对象数组?

如何运用领域驱动设计 - 值对象

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程