ajax写级联效果，动态从数据库获取数据

要实现的级联数据的效果是，咨询方式有多种，有的有子咨询方式，有的没有，直接上图

图一中选择自选方式，例如：选择面询，效果如图二，后面对应的有面询的子咨询方式，有的没有子咨询方式，如图三，没有子咨询方式，后面不显示

图一 图二 图三

首先创建一个dropdownlist和一个select，dropdownlist中的数据，从数据库中获取，select中的数据，从dropdownlist中获取id动态获取改变

需要创建的

1.aspx页面

dropdownlist控件绑定的数据从数据库中获取
 /// <summary>
        /// 获取咨询方式
        /// </summary>
        private void GetConsultantType()
        {
            IList items = new ArrayList();
            ListItem title = new ListItem();
            title.Text = "咨询方式";
            title.Value = "-1";
            this.ddlConsultantTypeId1.Items.Add(title);
            items = DAL.OzOa_Dal.ListOrderByTypeDal.GetConsultantTypeById();
            for (int i = 0; i < items.Count; i++)
            {
                DAL.Model.RecepInfoType recpInfoType = (DAL.Model.RecepInfoType)items[i];
                ListItem temp = new ListItem();
                temp.Text = recpInfoType.rIType.ToString();
                temp.Value = recpInfoType.rITypeID.ToString();
                this.ddlConsultantTypeId1.Items.Add(temp);
            }
        }

对应的级联select控件中的数据，通过ajax无刷新的形式获取，首先创建一个js文件，和一个一般处理程序文件。
ConPro.js

$(document).ready(function () {
    $("#ddlConsultantTypeId1").change(function () {
        var id = $(this).val();
        $.ajax({
            type: "POST",
            url: "../ashx/ConPro.ashx",
            data: { type: "ConsultantType", id: id },
            success: function (data) {
                if (data == "fail") {
                    alert("loading failed");
                }
                else {
                    addProvinceList(data);
                }
            }
        });
    });

});


function addProvinceList(str) {
    var strArray = str.split(";");
    $("#selConsultantTypeId2").empty();
    if (strArray.length == 1) {
        for (var i = 0; i < strArray.length; i++) {
            var strOptArr = strArray[i].split(",");

            $("#selConsultantTypeId2").append("<option value='" + strOptArr[0] + "'></option>");
        }
    } else {
        for (var i = 0; i < strArray.length; i++) {
            var strOptArr = strArray[i].split(",");

            $("#selConsultantTypeId2").append("<option value='" + strOptArr[0] + "'>" + strOptArr[1] + "</option>");
        }
    }
}

ConPro.ashx
using DAL.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;

namespace OzoA.ashx
{
    /// <summary>
    /// ConPro 的摘要说明
    /// 咨询方式实现省市级联的效果
    /// </summary>
    public class ConPro : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string type = context.Request["type"];
            string id = context.Request["id"];
            StringBuilder listStr = new StringBuilder();

            if (type == "ConsultantType")
            {
                IList<RecepInfoType> consultantType = DAL.OzOa_Dal.ListOrderByTypeDal.GetConsultantType2ById1(id);
                if (consultantType.Count == 0)
                {
                    context.Response.Write(listStr);
                }
                else
                {
                    foreach (RecepInfoType recepInfoType in consultantType)
                    {
                        listStr.Append(recepInfoType.rITypeID + "," + recepInfoType.rIType + ";");
                    }
                    int startIn;
                    startIn = listStr.Length - 1;
                    listStr.Remove(startIn, 1);
                    context.Response.Write(listStr);
                }
            }
            else
            {
                context.Response.Write("fail");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

写上这些基本级联效果搞定，最后一个说如何在后台获取select中的数据
string consultantType1 = this.ddlConsultantTypeId1.SelectedValue;//咨询方式1
//string consultantType3 = this.selConsultantTypeId2.SelectedValue;//咨询方式2
string consultantType2 = Request.Form[“selConsultantTypeId2”];