XmlHttp实现无刷新三联动ListBox

最新推荐文章于 2017-01-07 14:08:38 发布
最新推荐文章于 2017-01-07 14:08:38 发布
阅读量92 收藏
点赞数
分类专栏： C# 文章标签： SQL UI Go Web 脚本
1.html 

<HTML>
    <HEAD>
        <title>XmlHttp实现无刷新三联动ListBox</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
        <SCRIPT LANGUAGE="JavaScript">
            <!--
                //以XML求取ListBox2的数据
                function XmlPost2(obj)
                {
　　                var svalue = obj.value;
　　                var webFileUrl = "?povinceid=" + svalue;
　　                var result = "";
　　                var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
　　                xmlHttp.open("POST", webFileUrl, false);
　　                xmlHttp.send("");
　　                result = xmlHttp.responseText;
                　　
　　                if(result != "")
　　                {
　　　　                document.all("ListBox2").length=0;
　　　　                var piArray = result.split(",");
　　　　                for(var i=0;i<piArray.length;i++)
　　　　                {
　　　　　　                var ary1 = piArray[i].toString().split("|");
　　　　　　                document.all("ListBox2").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　　　                }
　　                }
　　                else
　　                {
　　　　                alert(result);
　　                }
                }
                //以XML求取ListBox3的数据
                function XmlPost3(obj)
                {
　　                var svalue = obj.value;
　　                var webFileUrl = "?cityid=" + svalue;
　　                var result = "";
　　                var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
　　                xmlHttp.open("POST", webFileUrl, false);
　　                xmlHttp.send("");
　　                result = xmlHttp.responseText;
                　　
　　                if(result != "")
　　                {
　　　　                document.all("ListBox3").length=0;
　　　　                var piArray = result.split(",");
　　　　                for(var i=0;i<piArray.length;i++)
　　　　                {
　　　　　　                var ary1 = piArray[i].toString().split("|");
　　　　　　                document.all("ListBox3").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　　　                }
　　                }
　　                else
　　                {
　　　　                alert(result);
　　                }
                }                
            //-->
        </SCRIPT>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
            <asp:ListBox id="ListBox1" style="Z-INDEX: 101; LEFT: 24px; POSITION: absolute; TOP: 16px" runat="server"
                Height="448px" Width="200px"></asp:ListBox>
            <asp:ListBox id="ListBox2" style="Z-INDEX: 102; LEFT: 352px; POSITION: absolute; TOP: 24px" runat="server"
                Height="432px" Width="168px"></asp:ListBox>
            <asp:ListBox id="ListBox3" style="Z-INDEX: 103; LEFT: 568px; POSITION: absolute; TOP: 24px" runat="server"
                Height="424px" Width="200px"></asp:ListBox>
        </form>
    </body>
</HTML>


2.cs代码 

public class WebForm2 : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.ListBox ListBox1;
        protected System.Web.UI.WebControls.ListBox ListBox2;
        protected System.Web.UI.WebControls.ListBox ListBox3;

        public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];

        GetDataSet#region GetDataSet
        public static DataSet GetDataSet(string sql)
        {
            SqlDataAdapter    sda =new SqlDataAdapter(sql,ConnectionString);
            DataSet ds=new DataSet();
            sda.Fill(ds);
            return ds;
        }
        #endregion

        property#region property
        private string povinceid
        {
            get
            {
                if(ViewState["povinceid"]!=null && ViewState["povinceid"].ToString()!="")
                {
                    return ViewState["povinceid"].ToString();
                }
                else
                {
                    if(Request["povinceid"]!=null && Request["povinceid"].ToString()!="")
                    {
                        return Request["povinceid"];
                    }
                    else
                    {
                        return "";
                    }
                }
            }
            set
            {
                ViewState["povinceid"]=value;
            }
        }
        private string cityid
        {
            get
            {
                if(ViewState["cityid"]!=null && ViewState["cityid"].ToString()!="")
                {
                    return ViewState["cityid"].ToString();
                }
                else
                {
                    if(Request["cityid"]!=null && Request["cityid"].ToString()!="")
                    {
                        return Request["cityid"];
                    }
                    else
                    {
                        return "";
                    }
                }
            }
            set
            {
                ViewState["povinceid"]=value;
            }
        }
        #endregion

        Page_Load#region Page_Load
        private void Page_Load(object sender, System.EventArgs e)
        {
            if(!this.IsPostBack)
　　        {
　　　　        this.down1_bind();
                this.ListBox1.Attributes.Add("onchange","XmlPost2(this);");
                this.ListBox2.Attributes.Add("onchange","XmlPost3(this);");
　　        }
　　        if(povinceid != "")
　　        {
　　　　        this.down2_bind(povinceid);
　　        }
            if(cityid != "")
　　        {
　　　　        this.down3_bind(cityid);
　　        }
        }

        #endregion

        down2_bind#region down2_bind
        private void down2_bind(string id)
        {
　　        string mystr = "";
　　        string sql = "select cityID,city from city where father = '" + id + "'";
　　        DataSet ds = GetDataSet(sql);

　　        if(ds.Tables[0].Rows.Count != 0)
　　        {
　　　　        for(int i=0;i<ds.Tables[0].Rows.Count;i++)
　　　　        {
　　　　　　        mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();
　　　　        }
　　　　        mystr = mystr.Substring(1);
　　        }
　　        this.Response.Write(mystr);
　　        this.Response.End();
        }
        #endregion

        down3_bind#region down3_bind
        private void down3_bind(string id)
        {
　　        string mystr = "";
　　        string sql = "select areaID,area from area where father = '" + id + "'";
　　        DataSet ds = GetDataSet(sql);

　　        if(ds.Tables[0].Rows.Count != 0)
　　        {
　　　　        for(int i=0;i<ds.Tables[0].Rows.Count;i++)
　　　　        {
　　　　　　        mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();
　　　　        }
　　　　        mystr = mystr.Substring(1);
　　        }
　　        this.Response.Write(mystr);
　　        this.Response.End();
        }

        #endregion

        down1_bind#region down1_bind
        private void down1_bind()
        {
　　        string sql = "select provinceID,province from povince";
　　        DataSet ds = GetDataSet(sql);
　　        this.ListBox1.DataSource = ds;
　　        this.ListBox1.DataValueField = "provinceID";
　　        this.ListBox1.DataTextField = "province";
　　        this.ListBox1.DataBind();　　        
        }

        #endregion

        Web Form Designer generated code#region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /** <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {    
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion
    }

3.数据库下载http://dl.iteye.com/topics/download/c829bf89-42cf-355d-95bb-a4af8a0f8ee5
4.数据库脚本(3,4随便一个就可以) 

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[area]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[area]
GO

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[city]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[city]
GO

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[povince]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[povince]
GO

CREATE TABLE [dbo].[area] (
    [id] [int] NOT NULL ,
    [areaID] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
    [area] [nvarchar] (60) COLLATE Chinese_PRC_CI_AS NULL ,
    [father] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL 
) ON [PRIMARY]
GO

CREATE TABLE [dbo].[city] (
    [id] [int] NOT NULL ,
    [cityID] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL ,
    [city] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
    [father] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL 
) ON [PRIMARY]
GO

CREATE TABLE [dbo].[povince] (
    [id] [int] NOT NULL ,
    [provinceID] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL ,
    [province] [nvarchar] (40) COLLATE Chinese_PRC_CI_AS NULL 
) ON [PRIMARY]
GO
Hecks
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义ListBox控件3
qq_41617901的博客
07-17 202
<ListBox ItemsSource="{Binding ListTodo}" BorderThickness="0" Margin="25 0 0 0"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Columns="4" > .
ListBox控件显示分类如何实现三级联动
无笺札记
12-29 3049
写asp.net程序的时候，用ListBox控件实现数据库中分类的三级显示，而且要实现选择第一级的时候，后面的两级（多级也可以）实现联动。ListBox分别为ListBox1、ListBox2、ListBox3如果只是简单的设置这三个ListBox的SelectedIndexChanged事件的处理程序，那么只能实现相邻的两级之间的联动。为了实现三级联动，需要使用一下方法：首先配置三个数据源控件：
[VB.NET]我要在listbox中显示三列该怎么做？
VB.NET学习网-VB.NET实例、VB.NET教程、VB.NET源码下载
12-28 1482
<!--google_ad_client = "pub-8333940862668978";/* 728x90, 创建于 08-11-30 */google_ad_slot = "4485230109";google_ad_width = 728;google_ad_height = 90;//--><script type="text/javascript"
Tkinter-ListBox基本使用
热门推荐
来瞧一瞧,看一看咯.
01-07 1万+
Tkinter-ListBox基本使用1:创建from tkinter import *root = Tk() listbox = Listbox(root) listbox.insert(END,'ListBox1') listbox.insert(END,'ListBox2') listbox.insert(END,'ListBox3')listbox.pack()root.mainloop()
三级联动ListBox无刷新读取XML文档
12-18
XmlHttp实现无刷新三联动ListBox 三级ListBox分别描述一级资源名，二级资源名和三级资源名。 如，当第一级选影视综艺时，第二就显示影视综艺的所有子类名，如电影，连续剧等。当再选电影时，第三级就显示出所有电影...
JSP XMLHttpRequest动态无刷新及其中文乱码处理
10-29
JSP与XMLHttpRequest结合实现动态无刷新页面交互和中文乱码处理是WEB开发中常见的需求和问题解决方法。下面详细解读了相关的知识点。 知识点一：XMLHttpRequest及动态无刷新技术原理 XMLHttpRequest是一个...
无刷新三级联动ListBox
12-16
XmlHttp实现无刷新三联动ListBox 三级ListBox分别描述全国省名，市名和区名 如，当第一级选广东省时，第二就显示广东省的所有市名，当再选广州市时，第三级就显示出所 有广州的区名。 全国省名，市名和区名分别保存...
ajax提交表单实现网页无刷新注册示例
09-04
本示例将详细讲解如何利用Ajax实现无刷新注册功能。 首先，让我们了解Ajax的基本结构。Ajax的核心是XMLHttpRequest对象，它提供了与服务器通信的能力。在JavaScript中，我们可以创建一个新的XMLHttpRequest实例，如...
xmlhttp无刷新
09-25
### 标题：xmlhttp无刷新 #### 知识点1：XMLHttpRequest对象 - **定义**：`XMLHttpRequest`是JavaScript的一个内置对象，它提供了与服务器交互的功能，可以在不重新加载整个页面的情况下发送异步请求并接收响应。 -...
html分组多选单选下拉框.rar
12-31
html分组多选单选下拉框
JVC AV-29L31彩电维修手册和图纸.rar
08-19
JVC AV-29L31彩电维修手册和图纸
树状数组：数据结构中的瑞士军刀
最新发布
08-19
数据结构是计算机科学中的一个基本概念，它指的是数据的组织、管理和存储方式，以及对数据的操作。数据结构使得数据的访问和修改更加高效和有序。常见的数据结构包括： 1. **数组**（Array）：一种线性数据结构，可以存储相同类型的元素，并通过索引访问。 2. **链表**（Linked List）：一种线性数据结构，由一系列节点组成，每个节点包含数据部分和指向下一个节点的指针。 3. **栈**（Stack）：一种后进先出（LIFO, Last In First Out）的数据结构，只能在一端进行添加或删除操作。 4. **队列**（Queue）：一种先进先出（FIFO, First In First Out）的数据结构，允许在一端添加元素，在另一端删除元素。 5. **哈希表**（Hash Table）：通过键值对存储数据的数据结构，可以快速地通过键来访问数据。 6. **树**（Tree）：一种层次结构的数据结构，每个节点有零个或多个子节点，通常用于表示具有层次关系的数据。 7. **图**（Graph）：由顶点（节点）和边组成，可以表示复杂的关系和网络结构。 每种数据结构都有其
JVC AV-21H1E彩电电路原理图.rar
08-19
JVC AV-21H1E彩电电路原理图
基于uniapp+springboot的校园失物招领系统的设计与实现--pf.zip
08-19
互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用校园失物招领系统可以有效管理，使信息管理能够更加科学和规范。 校园失物招领系统使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理校园失物招领系统信息，查看校园失物招领系统信息，管理校园失物招领系统。 总之，校园失物招领系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
基于Android日程管理APP设计与实现.docx
08-19
基于Android日程管理APP设计与实现.docx
Qt点亮开发板的一个LED-思维导图-学习笔记-基于正点原子阿尔法开发板
08-19
使用 Qt 在开发板上控制一个 LED。首先，界面初始化设置在嵌入式系统中根据屏幕大小进行全屏显示，按钮居中显示。由于出厂系统中 LED 的触发方式为心跳方式，为方便控制，需要通过 system() 函数将其触发方式改为 none。接着，描述了设置 LED 的方法，包括写入“0”或“1”来分别关闭和开启 LED，在写入之前先读取其当前状态以防止其他设置冲突。获取 LED 状态的代码负责读取 LED 的当前状态，并显示在按钮上。最后，设置 LED 状态的方法是一个槽函数，由按钮点击触发，负责切换 LED 状态。本文强调 Qt 本身不直接控制硬件，而是通过驱动层提供的接口进行交互，应用开发人员需理解这些接口以有效控制硬件。驱动开发人员则需确保接口的稳定性和高效性，满足应用层需求。
bevdet-4dim-input.zip
08-19
bevdet-4dim-input.zip
实现无刷新页面动态更新的XMLHttpRequest基础教程
XMLHttpRequest（XHR）是JavaScript中的一个核心对象，它提供了一种在客户端与服务器之间进行异步数据...XMLHttpRequest是前端开发的重要工具，常用于构建AJAX应用，实现页面无刷新的交互体验，极大地提升了用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值