今天因为要做一个通过下拉菜单选择目标教师的管理面板,需要用的了选择框的联动。
其实这个功能以前也做过,不过都需要大量的代码,麻烦,所以想试试用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,StrTmp
set 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>