JS ListBox动态加载数据-优快云博客

因项目需要，需要从listbox取出部分信息进行加载。原理为当body初始化时将全部数据保存到一个隐藏的listbox中，通过在body指定onload执行的函数。当用户选择部门时，首先将所有的数据项清除，然后进行循环，将匹配的数据加载到listbox中，因为没有用的服务器事件，因此选择的部门名称，在源数据源中存在。不然单纯的利用js是做不到的。代码如下：

<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="FNMS.WebSite._default" validateRequest="false" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>进行信息发布</title>
        <META content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        <META content="C#" name="CODE_LANGUAGE">
        <META content="JavaScript" name="vs_defaultClientScript">
        <META content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        <SCRIPT language="javascript" src="../include/private.js"></SCRIPT>
        <SCRIPT language="javascript" src="../include/fString.js"></SCRIPT>
        <SCRIPT language="javascript">
        function myInit()
        {
            var  alluser =document.getElementById("ListBox1");
            var  save_all_user = document.getElementById("all_user_list");
            var lb_count = alluser.options.length;
            //将所有用户保存到一个listbox中,用途是当选者部门时，从此listbox中获取数据进行数据填充
            for(var i=0;i<lb_count;i++)
            {
                var v = alluser.options[i].value;
                var t = alluser.options[i].text;
                save_all_user.options[save_all_user.options.length] = new Option(t,v,true,true);
            }       
            
        }
        function ChangeDep(depname)
        {
            my_source_list = document.getElementById("ListBox1");
            //将listbox中的所有数据清除完
            my_source_list.options.length = 0; 
            //根据部门进行循环添加数据
            var save_user = document.getElementById("all_user_list");
            var my_count = save_user.options.length;
            for(var i=0;i<my_count;i++)
            {
                var v = save_user.options[i].value;
                var t = save_user.options[i].text;
                if(depname != "")
                {
                    if (t.indexOf(depname) >0)
                    {
                        my_source_list.options[my_source_list.options.length] = new Option(t,v,false,false);
                    }
                }
                else
                {
                        my_source_list.options[my_source_list.options.length] = new Option(t,v,false,false);
                }
            }
        }
        //提交前检测数据
        function checkForm()
        {
            try
            {
                var t = document.Form1;
                var re = //s/g;
                if (t.art_title.value.replace(re,"") == "")
                {
                    alert("请填写信息标题");
                    t.art_title.focus();
                    return false;
                }
                if (Parse(t.art_title.value))
                {
                    alert("信息标题中不能包含有下列字符/n英文的单引号、双引号、<>等/n请用相应的中文符号替代");
                    t.art_title.focus();
                    return false;
                }
                if (t.art_title.value.length>150){
                    alert("信息标题限制在150字数以内");
                    t.art_title.focus();
                    return false;
                }
                
                tt.art_content.value = t.doc_html.value;
                tt.art_content_text.value = t.doc_html.text;
                if (t.art_content.value == "")
                {
                    alert("请填写信息内容");
                    return false;
                }
                if(t.userlist.value =="")
                {
                    alert("请选择回复部门");
                    return false;
                }
                
                t.submit();
                
            }
            catch(e)
            {
                alert(e);
                return false;
            }
        }
        //改变模式
        function ChangeTitleStyle()
        {
            Form1Form1.art_title.className=Form1.art_title_style.options[Form1.art_title_style.selectedIndex].value;
        }
        
        //添加用户
        function SelectOne()
        {
            
            var lst1=window.document.getElementById("ListBox1");
            var lstindex=lst1.selectedIndex;
            if(lstindex<0)
                return;
            var v = lst1.options[lstindex].value;
            var t = lst1.options[lstindex].text;
            //lst1.options[lstindex].parentNode.removeChild(lst1.options[lstindex]);
            var lst2=window.document.getElementById("lbUserList");
            //判断选中的用户数，只能为一个
            if (lst2.options.length>=1)
            {
                alert("回复人员只能有一个");
                return;
            }
            if(jsSelectIsExitItem(lst2,v))
            {
                alert("回复人员："+t+" 已经存在");
            }
            else
            {
                lst2.options[lst2.options.length] = new Option(t,v,true,true);
                
                //保存用户名字符串到hidden中
                var user = window.document.getElementById("userlist");
                user.value += v+"|"; 
            }
                
        }
        
        //判断选项中是否存在
        function jsSelectIsExitItem(objSelect,objItemValue)
        {
            var isExit = false;
            for(var i=0;i<objSelect.options.length;i++)
            {
                if(objSelect.options[i].value == objItemValue)
                {
                    isExit = true;
                    break;
                }
            }      
            return isExit;
        }
        
        //删除用户
        function DelOne()
        {
            var lst2=window.document.getElementById("lbUserList");
            var lstindex=lst2.selectedIndex;
            if(lstindex>=0)
            {
                var v_rem = lst2.options[lstindex].value+"|";
                var v = lst2.options[lstindex].value;
                var t = lst2.options[lstindex].text;
                //移出用户
                lst2.options[lstindex].parentNode.removeChild(lst2.options[lstindex]);
                //将移出的用户，添加的左侧的数据中
                //var lst1=window.document.getElementById("ListBox1");
                //lst1.options[lst1.options.length] = new Option(t,v,true,true);
                
                //将hidden中保存的用户名也作移除操作
                var user = window.document.getElementById("userlist");
                useruser.value = user.value.replace(v_rem.toString(),"");
            }
                
        }
        </SCRIPT>
    </HEAD>
    <BODY MS_POSITIONING="GridLayout" onload="myInit()">
        <FORM id="Form1" onsubmit="return checkForm()" method="post" runat="server">
            <TABLE class="clsCententTable" height="50%" cellSpacing="0" cellPadding="5" width="100%"
                border="1">
                <TR class="clsOperationHead">
                    <TD colSpan="2" height="26"><B>添加新信息</B>
                    </TD>
                </TR>
                <TR class="clsCell">
                    <TD align="left" width="10%">信息标题</TD>
                    <TD align="left" width="85%"><INPUT class="clsText" style="WIDTH: 480px; HEIGHT: 22px" type="text" maxLength="150" size="74"
                            name="art_title"><FONT color="red">(*)</FONT> 
                    </TD>
                </TR>
                <TR class="clsCell">
                    <TD align="left" width="10%">所属栏目</TD>
                    <TD align="left" width="85%">
                        <asp:DropDownList id="dllClass" runat="server" Width="480px"></asp:DropDownList></TD>
                </TR>
                <TR class="clsCell">
                    <TD colSpan="2">
                        <OBJECT id="doc_html" style="LEFT: 0px; TOP: 0px" type="text/x-scriptlet" height="450" width="100%"
                            data="../editor/editor.html" VIEWASTEXT>
                        </OBJECT>
                        <INPUT type="hidden" name="art_content"> <INPUT type="hidden" name="art_content_text">
                    </TD>
                </TR>
            </TABLE>
            <TABLE width="100%">
                <TR>
                    <TD colSpan="3">回复用户列表：</TD>
                </TR>
                <TR>
                    <TD style="WIDTH: 236px"><FONT face="宋体">待选用户<BR>
                            <asp:DropDownList  id="ddlDepart" runat="server" Width="184px"></asp:DropDownList><BR>
                            <asp:ListBox id="ListBox1" runat="server" Width="184px"></asp:ListBox></FONT></TD>
                    <TD style="WIDTH: 142px" align="center"><FONT face="宋体"><INPUT title="添加用户" onclick="SelectOne()" type="button" value=">>"><BR>
                            <BR>
                            <INPUT title="移出用户" onclick="DelOne()" type="button" value="<<"> </FONT>
                    </TD>
                    <TD><FONT face="宋体">选定用户<BR>
                        </FONT>
                        <asp:ListBox id="lbUserList" runat="server" Width="176px" Height="75px"></asp:ListBox></TD>
                </TR>
                <TR>
                    <TD colSpan="3">
                        <asp:Button id="btnSave" runat="server" Text="开始发布"></asp:Button></TD>
                </TR>
            </TABLE>
            <INPUT id="userlist" type="hidden" name="userlist">
            <!--此HTML控件中保存所有的用户列表-->
            <SELECT id="all_user_list" type="select-one" style="display:none;"></SELECT>
        </FORM>
    </BODY>
</HTML>

asp.net后台服务器代码，主要是添加，当选择部门时，进行事件的响应，代码如下：

private void Page_Load(object sender, System.EventArgs e)
        {
            //添加双击事件 
            this.ListBox1.Attributes.Add("onDblClick","SelectOne()");
            this.lbUserList.Attributes.Add("onDblClick","DelOne()");
            this.ddlDepart.Attributes.Add("onchange","ChangeDep(this.options[this.selectedIndex].value)");
            // 在此处放置用户代码以初始化页面 
            if(!Page.IsPostBack)
            {
                this.dgBind();
            }
            
        }