xmlhttp实现的三级连动下拉菜单(无刷新)经测试,有bug。无法三级联动,只能两级连动。

 

看了半天js代码看不懂。我就用拿开主义了,反正拿来就能用。

 

只能点击第一个联动第2个,点击第2个,联动第三个。

html

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;
using  System.Data.SqlClient;
namespace  WebApplication1
{
    
/// <summary>
    
/// Summary description for WebForm1.
    
/// </summary>

    public partial class WebForm1 : System.Web.UI.Page
    
{
    
    
        
public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];
    
        
GetDataSet

        
property

        
Page_Load

        
down2_bind

        
down3_bind
        
        
down1_bind

        
Web Form Designer generated code
    }

}

 

cs

<% @ Page language="c#" Inherits="WebApplication1.WebForm1" CodeFile="WebForm1.aspx.cs"  %>
< 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 >
        
< form  id ="Form1"  method ="post"  runat ="server" >
            
< INPUT  style ="Z-INDEX: 102; LEFT: 448px; WIDTH: 56px; POSITION: absolute; TOP: 8px; HEIGHT: 24px"
                onclick
="getData();"  type ="button"  value ="test" >
            
< asp:TextBox  id ="TextBox1"  style ="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 8px"  runat ="server"
                Width
="424px" ></ asp:TextBox >
            
< asp:DropDownList  id ="DropDownList2"  runat ="server"  style ="Z-INDEX: 103; LEFT: 176px; POSITION: absolute; TOP: 48px" >
                
< asp:ListItem > 请选择 </ asp:ListItem >
            
</ asp:DropDownList >
            
< asp:DropDownList  id ="DropDownList1"  runat ="server"  style ="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 48px" >
                
< asp:ListItem > 请选择 </ asp:ListItem >
            
</ asp:DropDownList >
            
< asp:DropDownList  id ="DropDownList3"  runat ="server"  style ="Z-INDEX: 105; LEFT: 296px; POSITION: absolute; TOP: 48px" >
                
< asp:ListItem > 请选择 </ asp:ListItem >
            
</ asp:DropDownList >
            
< SCRIPT  LANGUAGE ="JavaScript" >
            
<!--
                
//以XML求取DropDownList2的数据
                function XmlPost2(obj)
                
{
                  
var svalue = obj.value;
                  
var webFileUrl = "?provinceid=" + 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;
                }

            
//-->
            
</ SCRIPT >
        
</ form >
    
</ body >
</ HTML >
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值