和大家分享一下用jquery+ashx在页面动态生成无限级下拉菜单

HTML代码:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>    <script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>    <%if (false)
      { %>    <script type="text/javascript" src="jquery-1.4.2-vsdoc.js"></script>    <%} %>    <script type="text/javascript">
        $.ajaxSetup({ async: false });
        var randomnum = Math.random();        $(document).ready(function() {
            $("#ddl1").append("<option value='-1' selected='selected'>请选择...</option>");
            $.getJSON("loadClass.ashx?num=" + randomnum, { "ddlId": 0 }, function(data) {                for (var i = 0; i < data.length; i++) {
                    $("#ddl1").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
                };                $("#ddl1").change(function() { GetItem($(this).val(), this); });            });
        });        function GetItem(parentId, obj) {            $.getJSON("loadClass.ashx?num=" + randomnum, { "ddlId": parentId }, function(data) {                $(obj).nextAll(".ddl").remove();                if (data != null) {
                    $("<select>", {
                        "class": "ddl",
                        change: function() {
                            GetItem($(this).val(), this);
                        }
                    }).appendTo($("#myDiv"));                    $($(".ddl")[$(".ddl").length - 1]).append("<option value='-1' selected='selected'>请选择...</option>");
                    for (var i = 0; i < data.length; i++) {
                        $($(".ddl")[$(".ddl").length - 1]).append($("<option></option>").val(data[i].ID).html(data[i].Cname));
                    };
                }
            });        }        function GetDropDownListValue() {
            var ddlValue;
            var ddlCount = $(".ddl").length;
            for (var i = ddlCount - 1; i >= 0; i--) {
                if (i != 0) {
                    if ($($(".ddl")[i]).val() != -1) {
                        ddlValue = $($(".ddl")[i]).val();
                        break;
                    }
                } else {
                    if ($($(".ddl")[i]).val() == -1) {
                        alert("请先选择一个选项");
                        return;
                    } else {
                        ddlValue = $($(".ddl")[i]).val();
                        break;
                    }
                }
            }
            alert(ddlValue);
        }    </script></head>
<body>
    <form id="form1" runat="server">
    <div id="myDiv">
        <select id="ddl1" class="ddl">
        </select>
    </div>
    <input type="button" value="取值" onclick="GetDropDownListValue();" />
    </form>
</body>
</html>

loadClass.ashx 一般处理程序代码:
<%@ WebHandler Language="C#" Class="loadClass" %>using System;
using System.Web;using System.Data;
using System.Text;
using System.Data.SqlClient;public class loadClass : IHttpHandler
{    public void ProcessRequest(HttpContext context)
    {
        int strId = Convert.ToInt32(context.Request.QueryString["ddlId"]);
        string strSQL = "select * from QuestionType where QuTypeFatherId=" + strId + "  order by QuTypeId asc ";
        SqlConnection con = new SqlConnection(@"data source=.;initial catalog=MyTestDataBase;user id=sa;password=19831016");
        SqlDataAdapter adp = new SqlDataAdapter(strSQL, con);
        DataTable dt = new DataTable();
        con.Open();
        adp.Fill(dt);
        con.Close();        StringBuilder strClass = new StringBuilder();
        if (dt.Rows.Count != 0)
        {
            strClass.Append("[");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                strClass.Append("{");
                strClass.Append("\"ID\":\"" + dt.Rows[i]["QuTypeId"].ToString() + "\",");
                strClass.Append("\"Cname\":\"" + dt.Rows[i]["QuTypeName"].ToString() + "\"");                if (i != dt.Rows.Count - 1)
                {
                    strClass.Append("},");
                }
            }
            strClass.Append("}");
            strClass.Append("]");
        }
        else
        {
            strClass = strClass.Append("");
        }
        context.Response.ContentType = "application/json";
        context.Response.ContentEncoding = Encoding.UTF8;
        context.Response.Write(strClass.ToString());
        context.Response.End();    }    public bool IsReusable
    {
        get
        {
            return false;
        }
    }}

数据库表结构
create database MyTestDataBase
gouse MyTestDataBase
goif exists(select * from sysobjects where name = 'QuestionType')
drop table QuestionType
gocreate table QuestionType
(
QuTypeId int primary key identity(1, 1),
QuTypeFatherId int not null,
QuTypeName varchar(50) unique not null,
QuTypeIsDel bit default(0) not null
)
goinsert into QuestionType values(0, '生活',0)
insert into QuestionType values(0, '电脑',0)
insert into QuestionType values(1, '服装',0)
insert into QuestionType values(1, '美容',0)
insert into QuestionType values(1, '美食',0)
insert into QuestionType values(1, '购房',0)
insert into QuestionType values(2, '装机',0)
insert into QuestionType values(2, '硬件',0)
insert into QuestionType values(2, '软件',0)
insert into QuestionType values(2, '互联网',0)
insert into QuestionType values(8, 'CPU',0)
insert into QuestionType values(8, '光驱',0)
insert into QuestionType values(8, '显卡',0)
insert into QuestionType values(8, '内存',0)
insert into QuestionType values(13, 'NVIDIA',0)
insert into QuestionType values(13, 'ATI',0)
insert into QuestionType values(13, '集成显卡',0)
insert into QuestionType values(15, 'geForce',0)
insert into QuestionType values(15, 'MX系列',0)
insert into QuestionType values(18, '6series',0)
insert into QuestionType values(18, '7series',0)
insert into QuestionType values(18, '8series',0)
insert into QuestionType values(18, '9series',0)
insert into QuestionType values(22, '8300',0)
insert into QuestionType values(22, '8300GT',0)
insert into QuestionType values(22, '8500',0)
insert into QuestionType values(22, '8500GT',0)
insert into QuestionType values(22, '8600',0)
insert into QuestionType values(22, '8600GT',0)
insert into QuestionType values(22, '8800',0)
insert into QuestionType values(22, '8800GT',0)
insert into QuestionType values(16, 'HD5450',0)
insert into QuestionType values(16, 'HD5770',0)
insert into QuestionType values(16, 'HD5970',0)
insert into QuestionType values(16, 'HD5670',0)
insert into QuestionType values(16, 'HD5570',0)
insert into QuestionType values(16, 'HD5870',0)select * from QuestionType

解决方案 »

  1.   

    标记一下，不懂web。以后可能用的到，支持楼主。
      

  2.   

    为什么要async: false？只加载一次吗？？
      

  3.   

    加随机数的目的？cache:false可以吗
      

  4.   

    IsReusable这个属性老是搞不明白什么时候用true，什么时候用false
      

  5.   

    生成json用序列化感觉要方便一点..
      

  6.   

    async是异步的意思，false表示同步，即本次操作不进行完不能做其他操作~
    一般的ajax不需要同步，楼主的可能需要绑定时必须有数据，所以要求同步
      

  7.   

    哦，谢谢。知道这个参数，但从没用过。感觉异步的用户体验比较好。以前做发帖功能的时候防止用户不等返回结果重复提交，还特意把按钮disable，囧
      

  8.   

    确实不错，最近在研究锋利的Jquery
      

  9.   

    膜拜您，想请教您个问题：实现图片在web窗口编辑，比如在上面画一条线，然后保存到服务器。
    谢谢！
      

  10.   


    如果为false，HttpApplication在处理完request后会被回收，那样就不占用内存。如果为true，IHttpHandler实例将会被保存在内存中，HttpApplication在处理接下来的请求时，会使用缓存的IHttpHandler实例。建议将其设置为false。（个人看法）
      

  11.   

    学习中~我正在使用《Csdn收音机》第一时间获取最新动态！
      

  12.   


    不好意思～～这个没研究过～～
    但是应该也需要用到handler一般处理程序～～
    你可以参考下引用drawing包之类的在页面动态生成验证码并且加干扰线的例子～网上有很多～