• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax实现无刷新三联动下拉框
    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; ids.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; ids.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#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.AjaxMethod
    using System;
    using System.Data;
    using System.Data.SqlClient;
    namespace AjaxTest
    {
    /**//// summary>
    /// Summary description for AjaxMethod.
    /// /summary>
    public class AjaxMethod
    {
    GetProvinceList#region GetProvinceList
    public static DataSet GetProvinceList()
    {
    string sql="select * from province";
    return GetDataSet(sql);
    }
    #endregion

    GetCityList#region GetCityList
    [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
    public DataSet GetCityList(int provinceid)
    {
    string sql="select * from city where father="+provinceid;
    return GetDataSet(sql); 
    }
    #endregion

    GetAreaList#region GetAreaList
    [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
    public DataSet GetAreaList(int cityid)
    {
    string sql="select * from area where father="+cityid;
    return GetDataSet(sql); 
    }
    #endregion

    GetDataSet#region GetDataSet
    public static DataSet GetDataSet(string sql)
    {
    string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
    SqlDataAdapter sda =new SqlDataAdapter(sql,ConnectionString);
    DataSet ds=new DataSet();
    sda.Fill(ds);
    return ds;
    }
    #endregion
    }
    }4.web.config
    httpHandlers>
    add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
    /httpHandlers>5.ajax.dll下载/Files/singlepine/Ajax.rar
    您可能感兴趣的文章:
    • ajax三级联动下拉菜单效果
    • AJAX省市区三级联动下拉菜单(java版)
    • 基于Ajax实现下拉框联动显示数据
    • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
    • JavaScript Ajax Json实现上下级下拉框联动效果实例代码
    • AJAX解析XML实例之下拉框省、市二级联动
    • jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
    • ajax读取数据库内容实现二级联动下拉选择菜单示例
    • Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
    • Ajax+Servlet实现无刷新下拉联动效果
    上一篇:pjblog发表评论用的ajaxJS.js
    下一篇:Ajax in action 英文版配书源码 下载
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    《增值电信业务经营许可证》 苏B2-20120278

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