今天因为要做一个通过下拉菜单选择目标教师的管理面板,需要用的了选择框的联动。 其实这个功能以前也做过,不过都需要大量的代码,麻烦,所以想试试用Ajax实现,所以开始了痛苦的一天了…… 通过百度,选定了使用JQuery的插件CascadingSelect和FillOptions 下载了示例,发现是aspx的文件……可是我用的是asp啊……于是再找,最后找到了一个asp版的json类,所以尝试自己改动一下去实现了 调试了半天,问题一大堆……例如提示什么“null为空不是对象”等等…… 又弄了半天…… 原来,$() 冲突了……另一个Js函数了声明了一个$(),幸好JQuery早就提供了解决方法;原来,json格式不对……找到的json类生成的json格式不适合JQuery的插件使用……FillOptions插件使用的格式是:["name1":"value1","name2":"value2",…] 这样的格式,改正……原来,JQuery的Ajax中文乱码……好像是UTF-8编码过的,需要Ajax的页面声明一下编码:Response.Charset="gb2312" 终于好了 附上CascadingSelect和FillOptions插件点击下载此文件 Asp.Net版的实例点击下载此文件 Asp版的json类(我修改过了)复制内容到剪贴板程序代码'--------------------------------------- ' JSONClass类 ' 将Select语句的执行结果转换成JSON '------------------------------------------ Class JSONClass ' 定义类属性,默认为Private Dim SqlString ' 用于设置Select Dim JSON ' 返回的JSON对象的名称 Dim DBConnection ' 连接到数据库的Connection对象 ' 可以外部调用的公共方法 Public Function GetJSON () dim JSONClassRs dim returnStr dim i dim oneRecord ' 获取数据 Set JSONClassRs= Server.CreateObject("ADODB.Recordset") JSONClassRs.open SqlString,DBConnection,1,1 ' 生成JSON字符串 if JSONClassRs.eof=false and JSONClassRs.Bof=false then if len(JSON)>0 then returnStr="{ "& JSON & ":" returnStr=returnStr & "["while JSONClassRs.eof=false ' ------- oneRecord= "{" for i=0 to JSONClassRs.Fields.Count -1 oneRecord=oneRecord & chr(34) &JSONClassRs.Fields(i).Name&chr(34)&":" oneRecord=oneRecord & chr(34) &JSONClassRs.Fields(i).Value&chr(34) &"," Next '去除记录最后一个字段后的"," oneRecord=left(oneRecord,InStrRev(oneRecord,",")-1) oneRecord=oneRecord & "}," '------------ returnStr=returnStr & oneRecord JSONClassRs.MoveNext Wend ' 去除所有记录数组后的"," returnStr=left(returnStr,InStrRev(returnStr,",")-1) returnStr=returnStr & "]" if len(JSON)>0 then returnStr=returnStr & "}" end if JSONClassRs.close set JSONClassRs=Nothing GetJSON=returnStr End Function '私用方法,在类中使用 Private Function check() End Function ' End Class Asp版的json类的调用方法复制内容到剪贴板程序代码dim a,StrTmpset a=new JSONClass a.Sqlstring="select jsid,(zsxm+'('+loginxm+')') as jsname from "&srsdbt(1)&" where Dep_id="&aID&" order by rank_jyk desc" a.dbconnection=conn a.json="" StrTmp = a.GetJSon()Response.Charset="gb2312"Response.write StrTmp CascadingSelect和FillOptions插件的调用方法复制内容到剪贴板程序代码<script src="include/jQuery.js" type="text/javascript"></script><script src="include/jQuery.FillOptions.js" type="text/javascript"></script><script src="include/jQuery.CascadingSelect.js" type="text/javascript"></script><script language="JavaScript">var IsErr=false;JQ("#jsname").AddOption("请先选择院系","0",true,0);JQ("#depid").CascadingSelect(JQ("#jsname"),"SRS_Check.asp?a=getjs",{datatype:"json",textfield:"jsname",valuefiled:"jsid",parameter:"id"},function(){if (IsErr){JQ("#jsname").html("");JQ("#jsname").AddOption("请先选择院系","0",true,0);}else{JQ("#jsname").AddOption("选择专家...","0",true,0);}});</script>