如下，ajax二级联动怎么做？

[mathieuxiao]

下拉框1 | 下拉框2 | 按钮
-----------------------------------------
GridView

要求：
1、使用js实现两个下拉框的无刷新联动，下拉框是服务器端控件或客户端标记无所谓；
2、点击按钮后，可通过下拉框2的取值从数据库取出数据填充网格控件；
3、点击按钮后，能够保存两个下拉框的取值；

注：最好有源码，思路也欢迎！
我自己做了一个下拉框使用的是DropDownList,前面的功能都能实现，但是无法在回发后保存选项，而且第2次改变下拉框1
的选项时，下拉框2的选项没有变化（可能是受缓存的影响）。希望大家给的源码能够解决这个问题。

[LiuK_Moon]

首先楼主要明白一个问题

你要用的是Ajax方法实现级联无刷新效果，那么就不可能保留上次的选项，也就是说，Ajax是客户端异步无刷新的，根本不能状态保持！！！

要用非常手段，每次在脚本里记录选项值给隐藏域，回调时重新赋值给下拉框，不过这个有点麻烦，做起来不舒服。

给你代码，纯手写Ajax代码实现级联：

步骤如下：
1、添加Ajax.dll引用到Bin目录
2、修改项目Web.Config文件，添加如下代码到<system.web></system.web>之间

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

3、后台代码：

using Ajax;

protected void Page_Load(object sender, EventArgs e)
    {
 Ajax.Utility.RegisterTypeForAjax(typeof(InsertReport));

if (!IsPostBack)
        {
ddlParent.Attributes.Add("onchange", "sp()");
GetParentCompany();
}
}

 #region 初始化省公司
    private void GetParentCompany()
    {
        DataSet dsdep = 获取省公司
        if (dsdep != null && dsdep.Tables[0].Rows.Count > 0)
        {
            ddlParent.DataSource = dsdep.Tables[0].DefaultView;
            ddlParent.DataTextField = "DepName";
            ddlParent.DataValueField = "ID";
            ddlParent.DataBind();
        }
        ListItem li = new ListItem();
        li.Text = "请选择省公司";
        li.Value = "0";
        ddlParent.Items.Insert(0, li);
        }
    #endregion

    #region Ajax方法获取省分公司
    [AjaxMethod]
    public static string GetChildCompanyByParentID(int parentId)
    {
        string tmp = "";
        DataSet ds_Area = 获取方法
        if (ds_Area != null && ds_Area.Tables[0].Rows.Count > 0)
        {
            for (int i = 0; i < ds_Area.Tables[0].Rows.Count; i++)
            {
                tmp = tmp + ds_Area.Tables[0].Rows[i]["DepName"].ToString() + "|" + ds_Area.Tables[0].Rows[i]["ID"] + ",";
            }
        }
        tmp = tmp.TrimEnd(',');
        return tmp;
    }
    #endregion

4、前台代码

<script type="text/javascript">
    function sp()
    {    
        var sp = document.getElementById("ddlParent");
        var p = sp.options[sp.selectedIndex].value;    
        if(p == 0 || p == 1)
        {        
             document.getElementById("ddlChild").length=0;
        }  
        else 
        {
            InsertReport.GetChildCompanyByParentID(p,callback_GetChildCompanyByParentID);
        }
    }
	
	function callback_GetChildCompanyByParentID(res)
	{
        var sc = document.getElementById("ddlChild"); 
		if(res!=null)
		{   
		    sc.length = 0;		 
		    sc.options.add(new Option("请选择省分公司",0));		    
		    
		    var city = new Array();
		    city = res.value.split(",");
		    for(var i=0;i<city.length;i++)
		    {
		        var cvalue = new Array();
		        cvalue = city[i].split("|");
		        sc.options.add(new Option(cvalue[0],cvalue[1]));
		    }
		}
	}  
	
  </script>



<asp:DropDownList ID="ddlParent" runat="server" >
                    </asp:DropDownList>
                     
                    <asp:DropDownList ID="ddlChild" runat="server" >
                    </asp:DropDownList>

楼主给你借鉴看看

[yqyqyoyo]

用Ajax请求服务之后返回数据，在前台在根据返回的数据做相应的处理。

[damjmk2]

发送请求 ->请求成功 -> 继续发送连动请求 ->请求成功

连动请求函数应该写在 第一次请求的回调函数中

[nocallstle]

多用jquery

[mathieuxiao]

有例子吗？也不用实现取数据在网格控件中显示，只要在点击按钮后将下拉框2的值显示在某个文本框中，同时保存两个下拉框的选项。

[damjmk2]

jQuery.post(url,[data],[callback]);
连动的时候把函数写在第一次的callback函数中就好了

[misswangjinfeng]

这是一个前台代码的例子，参照看看！


<script type="text/javascript" >
function getStudentInfo()
{
var classinfo=document.getElementById("<%=DropDownList1.ClientID%>");//班级对象
var classId=classinfo.options[classinfo.selectedIndex].value;
var studentInfo=document.getElementById("<%=DropDownList2.ClientID%>");//学生对象
if(classId!=0)
{
//清空
studentInfo.options.length=0;
var option1=new Option("--请选择--","0");
studentInfo.options.add(option1);
//AjaxPro调用后台获取数据
var students=JiLian.GetStudentByClass(classId);
//返回表对象，通过Value获取成js对象，会自动装换成表，Row行集合，长度用length
//获取列Row[i]，列名
//实际上是：js解析到客户端是转化表的对象数组了，不能Row[i][j]来获取
for(var i=0;i<students.value.Rows.length;i++)
{
var optionadd=new Option(students.value.Rows[i].studentName,students.value.Rows[i].id);
studentInfo.options.add(optionadd);
}

}else
{
alert("没有数据");
studentInfo.options.length=0;
var option1=new Option("--请选择学生--","0");
studentInfo.options.add(option1);
}
}
</script>

//
<asp:DropDownList ID="DropDownList1" runat="server" onchange="getStudentInfo()" Width="194px">
<asp:ListItem Value="0">---请选择---</asp:ListItem>
</asp:DropDownList>

[yuxh81]

会ajax这个就很简单

建议前台使用jquery的ajax方法，兼容性好，而且很方便
后台使用.ashx文件处理请求

[打一壶酱油]

如果是我的话会用 jquery 或者 updatepanel

[shaoliang520xi]

记得给分
//获取国家信息
function GetCountryList<%=DivName %>()
{
$.ajax({
type:"Post",
url:"<%=BLL.Config.root %>ProAjax/Clearing/GetCountry.aspx",
data:"",
success:function (msg){
var datalist=eval(msg);
for(var i=0;i<datalist.length;i++){
var key=datalist[i][0];
var value=datalist[i][1];
$("<option value="+value+">"+key+"</option>").appendTo($("#ddlCountry<%=DivName %>"));
}
$("<option value=''>其他国家或地区</option>").appendTo($("#ddlCountry<%=DivName %>"));
$("#ddlCountry<%=DivName %>").val(35);
GetProvinceById<%=DivName %>();
}
})
}
//通过国家ID获取省份列表信息
function GetProvinceById<%=DivName %>(){
var CountryID=$("#ddlCountry<%=DivName %>").val();
$("#ddlprovince<%=DivName %>").html("");
if(CountryID==""){
//其他国家或地区
$("#ddlprovince<%=DivName %>").css("display","none");
$("#ddlCity<%=DivName %>").css("display","none");
$("#ddlarea<%=DivName %>").css("display","none");
}else{
//选择了国家
$("#ddlprovince<%=DivName %>").css("display","");
$("#ddlCity<%=DivName %>").css("display","");
$("#ddlarea<%=DivName %>").css("display","");
var datalist="cid="+CountryID;
$.ajax({
type:"Post",
url:"<%=BLL.Config.root %>ProAjax/Clearing/GetProvinceList.aspx",
data:datalist,
success:function(msg){
if(msg!=""){
//有省份
var datalist=eval(msg);
for(var i=0;i<datalist.length;i++){
var key=datalist[i][0];
var value=datalist[i][1];
$("<option value="+value+">"+key+"</option>").appendTo($("#ddlprovince<%=DivName %>"));
}
$("<option value=''>请选择省份</option>").prependTo($("#ddlprovince<%=DivName %>"));
$("#ddlprovince<%=DivName %>").val("");
}else{
//无省份
$("<option value=''>请选择省份</option>").appendTo($("#ddlprovince<%=DivName %>"));
$("#ddlCity<%=DivName %>").html("");
$("<option value=''>请选择城市</option>").appendTo($("#ddlCity<%=DivName %>"));
$("#ddlarea<%=DivName %>").html("");
$("<option value=''>请选择县区</option>").appendTo($("#ddlarea<%=DivName %>"));

}
}
})
}
}

//通过省份获取城市列表
function GetCityById<%=DivName %>(){
var provinceId=$("#ddlprovince<%=DivName %>").val();
$("#ddlCity<%=DivName %>").html("");
if(provinceId==""){
//无,请选择省份
$("<option value=''>请选择城市</option>").appendTo($("#ddlCity<%=DivName %>"));
}else{
//有选择了省份
var datalist="pid="+provinceId;
$.ajax({
type:"Post",
url:"<%=BLL.Config.root %>ProAjax/Clearing/GetCityList.aspx",
data:datalist,
success:function(msg){
if(msg!=""&&msg!="[]"){
//有城市
var datalist=eval(msg);
for(var i=0;i<datalist.length;i++){
var key=datalist[i][0];
var value=datalist[i][1];
$("<option value="+value+">"+key+"</option>").appendTo($("#ddlCity<%=DivName %>"));
}
$("<option value=''>请选择城市</option>").prependTo($("#ddlCity<%=DivName %>"));
$("#ddlCity<%=DivName %>").val("");
$("#ddlarea<%=DivName %>").html("");
$("<option value=''>请选择县区</option>").appendTo($("#ddlarea<%=DivName %>"));
}else{
//无城市
$("<option value=''>请选择城市</option>").appendTo($("#ddlCity<%=DivName %>"));
$("#ddlarea<%=DivName %>").html("");
$("<option value=''>请选择县区</option>").appendTo($("#ddlarea<%=DivName %>"));
}
}
})
}
}


//通过城市获取县区列表
function GetArea<%=DivName %>(){
var cityId=$("#ddlCity<%=DivName %>").val();
$("#ddlarea<%=DivName %>").html("");
if(cityId==""){
//无，请选择城市
$("<option value=''>请选择县区</option>").appendTo($("#ddlarea<%=DivName %>"));
}else{
//有选择城市
var datalist="citycode="+cityId;
$.ajax({
type:"Post",
url:"<%=BLL.Config.root %>ProAjax/Clearing/GetAreaList.aspx",
data:datalist,
success:function(msg){
if(msg!=""&&msg!="[]"){
//有县区
var datalist=eval(msg);
for(var i=0;i<datalist.length;i++){
var key=datalist[i][0];
var value=datalist[i][1];
$("<option value="+value+">"+key+"</option>").appendTo($("#ddlarea<%=DivName %>"));
}
$("<option value=''>请选择县区</option>").prependTo($("#ddlarea<%=DivName %>"));
$("#ddlarea<%=DivName %>").val("");
}else{
//无县区
$("<option value=''>请选择县区</option>").appendTo($("#ddlarea<%=DivName %>"));
}
}
})
}
}

[村长_乐]

把下拉列表和按钮放到ajax中的updatepanel中，就可以实现无刷新

[mathieuxiao]

在这里我希望只是用xmlhttprequest就能搞定，至于updatepanel和jquery能不用就暂时不用，而且使用jquery能够在我回发时保留上次的选项吗？


大家最好给个源码，谢谢！