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

1.html代码HTML>    HEAD>        title>Ajax实现无刷新三联动下拉JavaScript
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

1.html代码


<
HTML
>

    

<
HEAD
>

        

<
title
>
Ajax实现无刷新三联动下拉框
</
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"
>

            
            
//城市------------------------------
            function cityResult() 
            

                
var city=document.getElementById("DropDownList1");
                AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
            }

            
            
function get_city_Result_CallBack(response)
            
{
                
if (response.value != null)
                
{                    
                    
//debugger;
                    document.all("DropDownList2").length=0;                
                
var ds = response.value;
                    
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    
{                    
                        
for(var i=0; i<ds.Tables[0].Rows.length; i++)
                    
{
                        
var name=ds.Tables[0].Rows[i].city;
                      
var id=ds.Tables[0].Rows[i].cityID;
                      document.all(
"DropDownList2").options.add(new Option(name,id));
                    }

                    }

                }
                
                
return
            }

            
//市区----------------------------------------
            function areaResult() 
            

                
var area=document.getElementById("DropDownList2");
                AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
            }

            
function get_area_Result_CallBack(response)
            
{
                
if (response.value != null)
                
{                    
                    document.all(
"DropDownList3").length=0;                
                
var ds = response.value;
                    
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    
{                    
                        
for(var i=0; i<ds.Tables[0].Rows.length; i++)
                    
{
                      
var name=ds.Tables[0].Rows[i].area;
                      
var id=ds.Tables[0].Rows[i].areaID;
                      document.all(
"DropDownList3").options.add(new Option(name,id));
                    }
                
                    }

                }

                
return
            }

            
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
>

    

</
HEAD
>

    

<
body 
ms_positioning
="GridLayout"
>

        

<
form 
id
="Form1"
 method
="post"
 runat
="server"
>

            

<
TABLE 
id
="Table1"
 style
="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px"
 cellSpacing
="1"

                cellPadding

="1"
 width
="300"
 border
="1"
 bgColor
="#ccff66"
>

                

<
TR
>

                    

<
TD
>
省市
</
TD
>

                    

<
TD
><
asp:dropdownlist 
id
="DropDownList1"
 runat
="server"
></
asp:dropdownlist
></
TD
>

                

</
TR
>

                

<
TR
>

                    

<
TD
>
城市
</
TD
>

                    

<
TD
><
asp:dropdownlist 
id
="DropDownList2"
 runat
="server"
></
asp:dropdownlist
></
TD
>

                

</
TR
>

                

<
TR
>

                    

<
TD
>
市区
</
TD
>

                    

<
TD
><
asp:dropdownlist 
id
="DropDownList3"
 runat
="server"
></
asp:dropdownlist
></
TD
>

                

</
TR
>

            

</
TABLE
>

            

<
asp:TextBox 
id
="TextBox1"
 style
="Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px"
 runat
="server"

                Width

="424px"
></
asp:TextBox
><
INPUT 
style
="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"

                type

="button"
 value
="test"
 onclick
="getData();"
>

        

</
form
>

    

</
body
>


</
HTML
>

2.cs代码


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;

namespace
 AjaxTest


{
    
/// <summary>
    
/// Summary description for WebForm1.
    
/// </summary>

    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.TextBox TextBox1;
        
protected System.Web.UI.WebControls.DropDownList DropDownList3;
    
        
private void Page_Load(object sender, System.EventArgs e)
        
{    
            Ajax.Utility.RegisterTypeForAjax(
typeof(AjaxMethod));
            
if(!Page.IsPostBack)
            
{
                
this.DropDownList1.DataSource=AjaxMethod.GetProvinceList();
                
this.DropDownList1.DataTextField="province";
                
this.DropDownList1.DataValueField="provinceID";
                
this.DropDownList1.DataBind();
                
                
this.DropDownList1.Attributes.Add("onclick","cityResult();");
                
this.DropDownList2.Attributes.Add("onclick","areaResult();");
            }

        }


        
Web Form Designer generated code        
    }

}

3.AjaxMethod


using
 System;

using
 System.Data;

using
 System.Data.SqlClient;

namespace
 AjaxTest


{
    
/// <summary>
    
/// Summary description for AjaxMethod.
    
/// </summary>

    public class AjaxMethod
    
{
        
GetProvinceList

        
GetCityList

        
GetAreaList
    
        
GetDataSet
    }

}

4.web.config


<
httpHandlers
>

            

<
add 
verb
="POST,GET"
 path
="ajax/*.ashx"
 type
="Ajax.PageHandlerFactory, Ajax"
 
/>

    

</
httpHandlers
>

5.ajax.dll下载
/Files/singlepine/Ajax.rar

6.真实数据库下载
area1.rar

7.源代码下载
AjaxTest.rar

 

本文来源21aspnet,经授权后由javajgs_com发布,观点不代表Java架构师必看的立场,转载请联系原作者。

发表评论