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

系统 1491 0
Ajax实现无刷新三联动下拉框
1.html代码
< HTML >
< HEAD >
< title > Ajax实现无刷新三联动下拉框 </ title >
< meta content ="MicrosoftVisualStudio.NET7.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>
/// SummarydescriptionforWebForm1.
/// </summary>

public class WebForm1:System.Web.UI.Page
{
protected System.Web.UI.WebControls.DropDownListDropDownList1;
protected System.Web.UI.WebControls.DropDownListDropDownList2;
protected System.Web.UI.WebControls.TextBoxTextBox1;
protected System.Web.UI.WebControls.DropDownListDropDownList3;

private void Page_Load( object sender,System.EventArgse)
{
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(); " );
}

}


WebFormDesignergeneratedcode #region WebFormDesignergeneratedcode
override protected void OnInit(EventArgse)
{
//
// CODEGEN:ThiscallisrequiredbytheASP.NETWebFormDesigner.
//
InitializeComponent();
base .OnInit(e);
}


/**/ /// <summary>
/// RequiredmethodforDesignersupport-donotmodify
/// thecontentsofthismethodwiththecodeeditor.
/// </summary>

private void InitializeComponent()
分享到:
评论

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


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论