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

qqdd2716 2010-09-11 09:52:35
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

go



use MyTestDataBase

go



if exists(select * from sysobjects where name = 'QuestionType')

drop table QuestionType

go



create 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

)

go



insert 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
...全文
1074 61 打赏 收藏 转发到动态 举报
写回复
用AI写文章
61 条回复
切换为时间正序
请发表友善的回复…
发表回复
hanyise520 2010-11-05
  • 打赏
  • 举报
 回复
哥你勒个也写得太复杂了点撒
qqdd2716 2010-09-14
  • 打赏
  • 举报
 回复
[Quote=引用 30 楼 lhlwy 的回复:]
膜拜您，想请教您个问题：实现图片在web窗口编辑，比如在上面画一条线，然后保存到服务器。
谢谢！
[/Quote]

不好意思～～这个没研究过～～
但是应该也需要用到handler一般处理程序～～
你可以参考下引用drawing包之类的在页面动态生成验证码并且加干扰线的例子～网上有很多～
kakajay008 2010-09-14
  • 打赏
  • 举报
 回复
学习了
jay88yy 2010-09-12
  • 打赏
  • 举报
 回复
学习下
kzokzo1985 2010-09-12
  • 打赏
  • 举报
 回复
狠牛，很犀利
hongzerenhe 2010-09-12
  • 打赏
  • 举报
 回复
太复杂了
yao2004jessica 2010-09-12
  • 打赏
  • 举报
 回复
好长啊。。。。。。。。。
weianxin89 2010-09-12
  • 打赏
  • 举报
 回复
什么东西看不明白
cjh200102 2010-09-12
  • 打赏
  • 举报
 回复
[Quote=引用楼主 qqdd2716 的回复:]
HTML代码:

HTML code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3……
[/Quote]

支持
qqrto 2010-09-12
  • 打赏
  • 举报
 回复
支持一下
qqdd2716 2010-09-12
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 chenghaoorange 的回复:]
引用 9 楼 camperer 的回复:
为什么要async: false？只加载一次吗？？

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

正解～～
chenshunpp 2010-09-12
  • 打赏
  • 举报
 回复
唐长老，是否从东土大唐而来……
wolf_100 2010-09-12
  • 打赏
  • 举报
 回复
学习一下
qq1058569493 2010-09-12
  • 打赏
  • 举报
 回复
sdfsdfsdfs
qq1058569493 2010-09-12
  • 打赏
  • 举报
 回复
sdfsdfsdfsdf
qq1058569493 2010-09-12
  • 打赏
  • 举报
 回复
fsdfsdfsdfs
huwen7565833 2010-09-12
  • 打赏
  • 举报
 回复
学习一下！！
happyhuoyu521 2010-09-12
  • 打赏
  • 举报
 回复
好，很好！
q107770540 2010-09-11
  • 打赏
  • 举报
 回复
加载更多回复（23）
ajax+jquery+ashx实现上传文件
ajax+jquery+ashx实现上传文件 简单易用，直接调用
Ajax无刷新上传图片。（jquery + c# ashx），生成缩略图等
Ajax无刷新上传图片。（jquery + c# ashx），生成缩略图
jQuery+ashx实现全国城市联动
jQuery+ashx实现全国城市联动，不刷新页面。
json+jquery+ashx轻量MVC实例.rar
json+jquery+ashx使用$.getJSON 轻量MVC实例，
ajax+jquery+ashx
ajax jquery ashx写的一个小例子有利于理解ajax的异步传输
C#

110,557

社区成员

642,563

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • Web++
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧

+ 用AI写文章