Ajaxpro2 实现三级联动

后台代码：

这里用的企业库，大家可以根据实际情况取数据，

 Database database;
        DbCommand dbcmd;
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(select));
            if (!IsPostBack)
            {
                database = DatabaseFactory.CreateDatabase();
                string sql = "select * from HM_AreaInfo where fathercode is null";
                dbcmd = database.GetSqlStringCommand(sql);
                DataSet ds = database.ExecuteDataSet(dbcmd);
                WebHelper.BindDropDownList(ddlProvinceList, ds.Tables[0], "code", "AreaName","请选择");
            }
        }

        [AjaxPro.AjaxMethod]
        public DataTable getCityList1(string code)
        {
            database = DatabaseFactory.CreateDatabase();
            string sql = "select * from HM_AreaInfo where fathercode=@fathercode";
            dbcmd = database.GetSqlStringCommand(sql);
            database.AddInParameter(dbcmd, "@fathercode", DbType.String, code);
            DataSet ds = database.ExecuteDataSet(dbcmd);
            return ds.Tables[0];
        }

 

这里是前台代码：

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
    $("[id$='ddlProvinceList']").change(function() {
            var res = HMb2b.Controls.select.getCityList1(this.value).value;
            var ddl = $("[id$='ddlCityList']");
            ddl.empty();

            if (res) {
                ddl.css("display", "inline");
                ddl.append("<option value=''>请选择</option>");
                for (var i = 0; i < res.Rows.length; i++) {
                    ddl.append("<option value='" + res.Rows[i].Code + "'>" + res.Rows[i].AreaName + "</option>");
                }
            }
        });
        $("[id$='ddlCityList']").change(function() {
            var res = HMb2b.Controls.select.getCityList1(this.value).value;
            var ddl = $("[id$='DropDownList1']");
            ddl.empty();
            ddl.append("<option value=''>请选择</option>");
            if (res) {
                ddl.css("display", "inline");
                for (var i = 0; i < res.Rows.length; i++) {
                    ddl.append("<option value='" + res.Rows[i].Code + "'>" + res.Rows[i].AreaName + "</option>");
                }
            }
        });
    });
</script>

<table width="200" border="0" align="center" cellpadding="3" cellspacing="1" bordercolor="#FFFFFF"
    style="border-collapse: collapse">
    <tr align="center">
        <td height="20" colspan="2">
            <strong>AjaxPro实现二级联动</strong>
        </td>
    </tr>
    <tr class="tdbg">
        <td width="30%">
            省份
        </td>
        <td width="70%" align="left">
            <asp:DropDownList ID="ddlProvinceList" runat="server">
            </asp:DropDownList><asp:DropDownList ID="ddlCityList" runat="server" style="display:none">
            </asp:DropDownList><asp:DropDownList ID="DropDownList1" runat="server" style="display:none">
            </asp:DropDownList>
        </td>
    </tr>
  </table>

这里的代码只是简单的实现了功能，并没有美化界面，等有时间的话，我会简单整理一下，重新编辑一下该文章，这里仅供大家参考