Asp.Net XmlHttp实现无刷新三联动下拉框

转载 2007年09月15日 23:14:00
出处:http://singlepine.cnblogs.com/articles/265678.html


1.html代码

<HTML>
    
<HEAD>
        
<title>XmlHttp实现无刷新三联动下拉框</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">
    
</HEAD>
    
<body MS_POSITIONING="GridLayout">
        
<form id="Form1" method="post" runat="server">
            
<INPUT style="Z-INDEX: 102; LEFT: 448px; WIDTH: 56px; POSITION: absolute; TOP: 80px; HEIGHT: 24px"
                onclick
="getData();" type="button" value="保存" id="Button1" name="Button1" runat="server">
            
<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 80px" runat="server"
                Width
="424px"></asp:TextBox>
            
<asp:DropDownList id="DropDownList2" runat="server" style="Z-INDEX: 103; LEFT: 176px; POSITION: absolute; TOP: 120px"></asp:DropDownList>
            
<asp:DropDownList id="DropDownList1" runat="server" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 120px"></asp:DropDownList>
            
<asp:DropDownList id="DropDownList3" runat="server" style="Z-INDEX: 105; LEFT: 296px; POSITION: absolute; TOP: 120px"></asp:DropDownList><INPUT style="Z-INDEX: 106; LEFT: 8px; WIDTH: 160px; POSITION: absolute; TOP: 176px; HEIGHT: 22px"
                type
="hidden" size="21" id="hidprovince" runat="server"><INPUT style="Z-INDEX: 107; LEFT: 184px; POSITION: absolute; TOP: 176px" type="hidden"
                id
="hidcity" runat="server"><INPUT style="Z-INDEX: 108; LEFT: 360px; POSITION: absolute; TOP: 176px" type="hidden"
                id
="hidarea" runat="server">
            
<SCRIPT LANGUAGE="JavaScript">
            
<!--
                
//以XML求取DropDownList2的数据
                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(
"DropDownList2").length=0;
                    
var piArray = result.split(",");
                    
for(var i=0;i<piArray.length;i++)
                    
{
                      
var ary1 = piArray[i].toString().split("|");
                      document.all(
"DropDownList2").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
                    }

                  }

                  
else
                  
{
                    alert(result);
                  }

                }

                
//以XML求取DropDownList3的数据
                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(
"DropDownList3").length=0;
                    
var piArray = result.split(",");
                    
for(var i=0;i<piArray.length;i++)
                    
{
                      
var ary1 = piArray[i].toString().split("|");
                      document.all(
"DropDownList3").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
                    }

                  }

                  
else
                  
{
                    alert(result);
                  }

                }

                
function getData()
                
{
                    
var province=document.getElementById("DropDownList1");
                    
var pindex = province.selectedIndex;
                    
var pValue = province.options[pindex].value;
                    
var pText  = province.options[pindex].text;
                    
                    
var city=document.getElementById("DropDownList2");
                    
var cindex = city.selectedIndex;
                    
var cValue = city.options[cindex].value;
                    
var cText  = city.options[cindex].text;
                    
                    
var area=document.getElementById("DropDownList3");
                    
var aindex = area.selectedIndex;
                    
var aValue = area.options[aindex].value;
                    
var aText  = area.options[aindex].text;
                    
                    
var txt=document.getElementById("TextBox1");                                

                    document.getElementById(
"<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
                    document.Form1.hidprovince.value
=pValue;
                    document.Form1.hidcity.value
=cValue;
                    document.Form1.hidarea.value
=aValue;
                }

            
//-->
            
</SCRIPT>
        
</form>
    
</body>
</HTML>

2.cs代码

public class WebForm1 : System.Web.UI.Page
    
{
        
protected System.Web.UI.WebControls.DropDownList DropDownList1;
        
protected System.Web.UI.WebControls.DropDownList DropDownList2;
        
protected System.Web.UI.WebControls.DropDownList DropDownList3;
        
protected System.Web.UI.WebControls.TextBox TextBox1;
    
        
public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];
    
        
#region GetDataSet
        
public static DataSet GetDataSet(string sql)
        
{
            SqlDataAdapter    sda 
=new SqlDataAdapter(sql,ConnectionString);
            DataSet ds
=new DataSet();
            sda.Fill(ds);
            
return ds;
        }

        
#endregion


        
#region property
        
private string provinceid
        
{
            
get
            
{
                
if(ViewState["provinceid"]!=null && ViewState["provinceid"].ToString()!="")
                
{
                    
return ViewState["provinceid"].ToString();
                }

                
else
                
{
                    
if(Request["provinceid"]!=null && Request["provinceid"].ToString()!="")
                    
{
                        
return Request["provinceid"];
                    }

                    
else
                    
{
                        
return "";
                    }

                }

            }

            
set
            
{
                ViewState[
"provinceid"]=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[
"cityid"]=value;
            }

        }

        
#endregion


        
#region Page_Load
        
private void Page_Load(object sender, System.EventArgs e)
        
{
            
if(!this.IsPostBack)
          
{
            
this.down1_bind();
                
this.DropDownList1.Attributes.Add("onchange","XmlPost2(this);");
                
this.DropDownList2.Attributes.Add("onchange","XmlPost3(this);");
          }

          
if(provinceid != "")
          
{
            
this.down2_bind(provinceid);
          }

            
if(cityid != "")
          
{
            
this.down3_bind(cityid);
          }

        }

        
        
#endregion


        
down2_bind

        
down3_bind
        
        
down1_bind

        
Web Form Designer generated code
    }

3.数据库area1.rar
4.Ajax实现无刷新三联动下拉框

5.源代码下载XmlHttpselect.rar 

XmlHttp实现无刷新三联动下拉框

 
  • zgh2002007
  • zgh2002007
  • 2006年11月30日 03:38
  • 323

XmlHttp实现无刷新三联动下拉框

1.html代码HTML>    HEAD>        title>XmlHttp实现无刷新三联动下拉框title>        meta name="GENERATOR" Content="M...
  • whfyc
  • whfyc
  • 2006年12月19日 15:21
  • 517

JQuery和ASP.NET分别实现级联下拉框效果

在学习Javascript之前知道下拉框的级联效果
  • wangyajin333
  • wangyajin333
  • 2014年07月03日 10:13
  • 3568

JS实现无刷新联动菜单(select)的方法

所谓联动菜单,就是后一个下拉框的选项是根据前一个下拉框被选中的值来决定的,一个典型的应用就是省市联动菜单了,市的下拉选项是根据你选了哪个省来决定的,类似的需求我们经常遇到,相信许多新手都被这个问题困扰...
  • neubuffer
  • neubuffer
  • 2013年11月23日 14:30
  • 421

菜鸟学Java(七)——Ajax+Servlet实现无刷新下拉联动

...
  • liushuijinger
  • liushuijinger
  • 2013年07月29日 11:09
  • 5116

Asp.net无刷新二级联动

Asp.net无刷新二级联动数据库建立表provinceid provinceName1 陕西3 山东8 河南表cityid cityname provinceid1 西安 12 济南 33 郑州 8...
  • wengman
  • wengman
  • 2009年04月20日 22:35
  • 2707

ASP.NET实现无刷新DropDownList联动

Example function load(state){ var drp2 = document.getElementById("DropDownList2"); for (i = ...
  • jxufewbt
  • jxufewbt
  • 2005年12月07日 09:40
  • 4042

AJAX+ASP.NET无刷新二级联动省市下拉列表

TwoDropDownList.aspx 中的代码如下:asp:ScriptManager ID="ScriptManager1" runat="server">asp:ScriptManager>d...
  • zhangyj_315
  • zhangyj_315
  • 2008年05月27日 11:12
  • 3287

动态联动select下拉框实现

我们在做下拉框选择时,常常会遇到一种场景,就是需要两个下拉框,其中一个下拉框的选项和内容需要根据第一个的下拉框的选择动态变化。比如我有大的分类:有氧运动  无氧运动选择有氧运动时,选项有:跑步,游泳选...
  • q383965374
  • q383965374
  • 2017年05月22日 17:57
  • 2722

ASP.NET——实现两个下拉框动态联动

这样的动态联动,一般由多个下拉框组成一组菜单,比如上面用到的两个下拉框。下拉菜单之间有联动的关系。当上级的选中项发生改变时,下级会根据上级中的选中项显示相应的内容。 用了动态联动之后,当面...
  • u010066934
  • u010066934
  • 2014年08月11日 16:10
  • 6488
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Asp.Net XmlHttp实现无刷新三联动下拉框
举报原因:
原因补充:

(最多只允许输入30个字)