JS制作的简单的三级及联

浏览数：41 / 时间：2015年06月09日

前台：

<form id="form1" runat="server">
        <div>
            省
        <select id="Province">
            <option>请选择</option>
        </select>
            市
        <select id="City">
             <option>请选择</option>
        </select>
            地区
        <select id="Space">
             <option>请选择</option>
        </select>
           <script type="text/javascript">
               $(function () {
                   $.ajax({
                       url: "TestClass/Cascade.ashx?id=1",
                       async: false,
                       success: function (data) {
                           $("#Province").append(data);
                           $("#Province").change(function () {
                               $.ajax({
                                   url: "TestClass/Cascade.ashx?id=2",
                                   data: { pid: $("#Province").attr("value") },
                                   success: function (data) {
                                       $("#City").html("");
                                       $("#City").append(data);
                                       $("#City").change(
                                           function () {
                                               $.ajax({
                                                   url: "TestClass/Cascade.ashx?id=3",
                                                   data: { cid: $("#City").attr("value") },
                                                   success: function (data) {
                                                       $("#Space").html("");
                                                       $("#Space").append(data);
                                                   }
                                               })
                                           })
                                   }
                               })
                           })
                       }
                   })
               })
            </script>
        </div>
    </form>

后台：

  public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            if (context.Request.QueryString["id"] == "1")
            {
                string sql = "SELECT ID,[enname] FROM [ProvinceInfo] WHERE ParentId=0";
                StringBuilder sb = new StringBuilder();
                SqlDataReader reader = PubSqlHelperFunc.ExecuteSqlDataReader(CommandType.Text, sql, null);
                while (reader.Read())
                {
                    sb.Append("<option value=");
                    sb.Append(reader["Id"]);
                    sb.Append(">");
                    sb.Append(reader["enname"]);
                    sb.Append("</option>");
                }
                reader.Close();
                context.Response.Write(sb.ToString());
            }
            else if (context.Request.QueryString["id"] == "2")
            {
                string sql = "SELECT ID,[enname] FROM [ProvinceInfo] WHERE ParentId=" + context.Request.Params["pid"] + "";
                StringBuilder sb = new StringBuilder();
                sb.Append("<option>请选择</option>");
                SqlDataReader reader = PubSqlHelperFunc.ExecuteSqlDataReader(CommandType.Text, sql, null);
                while (reader.Read())
                {
                    sb.Append("<option value=");
                    sb.Append(reader["Id"]);
                    sb.Append(">");
                    sb.Append(reader["enname"]);
                    sb.Append("</option>");
                }
                reader.Close();
                context.Response.Write(sb.ToString());
            }
            else if (context.Request.QueryString["id"] == "3")
            {
                string sql = "SELECT ID,[enname] FROM [ProvinceInfo] WHERE ParentId=" + context.Request.Params["cid"] + "";
                StringBuilder sb = new StringBuilder();
                sb.Append("<option>请选择</option>");
                SqlDataReader reader = PubSqlHelperFunc.ExecuteSqlDataReader(CommandType.Text, sql, null);
                while (reader.Read())
                {
                    sb.Append("<option value=");
                    sb.Append(reader["Id"]);
                    sb.Append(">");
                    sb.Append(reader["enname"]);
                    sb.Append("</option>");
                }
                reader.Close();
                context.Response.Write(sb.ToString());
            }
        }