本文主要是介绍XmlHttp实现无刷新三联动ListBox,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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代码
< 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 >
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
property
Page_Load
down2_bind
down3_bind
down1_bind
Web Form Designer generated code
}
3.数据库下载
/Files/singlepine/area.rar
{
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
property
Page_Load
down2_bind
down3_bind
down1_bind
Web Form Designer generated code
}
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
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
这篇关于XmlHttp实现无刷新三联动ListBox的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!