一个困扰很久的问题,终于解决了,虽然不是很完美。。。但是确实实现了级联!
一个困扰很久的问题,终于解决了,虽然不是很完美。。。但是确实实现了级联!
图片:
HTML 代码
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>级联选择</title>
</head>
<script type="text/javascript">
function loadClass(f){
var req = getHttpRequest();
var c1 = document.getElementById("class1");
var c2 = document.getElementById("class2");
var c = document.getElementById("content");
var result;
var pid=0;
//f 一个标识符,区别 class2 的选择动作
if (f) { pid = c1.options[c1.selectedIndex].value; }
var url = "checkName.asp?pid="+pid;
req.onreadystatechange = function()
{ //回调函数
if (4==req.readyState)
{
//使用 eval 方法自动将获取到的数据转换为一个 javascript 数组(unescape 解码asp中的编码)
result = eval("(" + unescape(req.responseText) + ")");
//载入一级分类
if (pid!=0)
{
c2.options.length=1;//添加二级分类前先清空列表内容
for (var i=0;i<result.length-1 ;i+=2 )
c2.options[c2.options.length]= new Option(result[i+1],result[i]);
}
else
{
if (c1.options.length<=1)
for (var i = 0;i<result.length-1 ;i=i+2 )
c1.options[c1.options.length] = new Option(result[i+1],result[i]);
}
}
}
req.open("post",url,true);
req.send(null);
}
//选择二级分类时,将选择的名称插入 div 中
function s(){
var c2=document.getElementById('class2');
var info=c2.options[c2.selectedIndex].text;
document.all["content"].innerHTML = info;
}
//兼容个浏览器,返回 httprequest 对象
function getHttpRequest()
{
var xmlreq = false;
if (window.XMLHttpRequest)
{
xmlreq = new XMLHttpRequest();
}
else
if (window.ActiveXObject)
{
try
{
xmlreq = new ActiveXObject( "Msxml2.XMLHTTP ");
}
catch(e1)
{
try
{
xmlreq = new ActiveXObject( "Microsoft.XMLHTTP ");
}
catch(e2)
{}
}
}
return xmlreq;
}
</script>
<body onload="loadClass()">
大类:
<select id="class1" style="font-size:12px;width:150px;" onchange="loadClass(1)">
<option value="">请选择</option>
</select>
<br><br>
小类:
<select id="class2" style="font-size:12px;width:150px;" onchange="s()">
<option value="">请选择</option>
</select>
<div id="content" style="border:dotted 1px #888;width:400px;height:300px;font:12px tahoma;"></div>
</body>
</html>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>级联选择</title>
</head>
<script type="text/javascript">
function loadClass(f){
var req = getHttpRequest();
var c1 = document.getElementById("class1");
var c2 = document.getElementById("class2");
var c = document.getElementById("content");
var result;
var pid=0;
//f 一个标识符,区别 class2 的选择动作
if (f) { pid = c1.options[c1.selectedIndex].value; }
var url = "checkName.asp?pid="+pid;
req.onreadystatechange = function()
{ //回调函数
if (4==req.readyState)
{
//使用 eval 方法自动将获取到的数据转换为一个 javascript 数组(unescape 解码asp中的编码)
result = eval("(" + unescape(req.responseText) + ")");
//载入一级分类
if (pid!=0)
{
c2.options.length=1;//添加二级分类前先清空列表内容
for (var i=0;i<result.length-1 ;i+=2 )
c2.options[c2.options.length]= new Option(result[i+1],result[i]);
}
else
{
if (c1.options.length<=1)
for (var i = 0;i<result.length-1 ;i=i+2 )
c1.options[c1.options.length] = new Option(result[i+1],result[i]);
}
}
}
req.open("post",url,true);
req.send(null);
}
//选择二级分类时,将选择的名称插入 div 中
function s(){
var c2=document.getElementById('class2');
var info=c2.options[c2.selectedIndex].text;
document.all["content"].innerHTML = info;
}
//兼容个浏览器,返回 httprequest 对象
function getHttpRequest()
{
var xmlreq = false;
if (window.XMLHttpRequest)
{
xmlreq = new XMLHttpRequest();
}
else
if (window.ActiveXObject)
{
try
{
xmlreq = new ActiveXObject( "Msxml2.XMLHTTP ");
}
catch(e1)
{
try
{
xmlreq = new ActiveXObject( "Microsoft.XMLHTTP ");
}
catch(e2)
{}
}
}
return xmlreq;
}
</script>
<body onload="loadClass()">
大类:
<select id="class1" style="font-size:12px;width:150px;" onchange="loadClass(1)">
<option value="">请选择</option>
</select>
<br><br>
小类:
<select id="class2" style="font-size:12px;width:150px;" onchange="s()">
<option value="">请选择</option>
</select>
<div id="content" style="border:dotted 1px #888;width:400px;height:300px;font:12px tahoma;"></div>
</body>
</html>
ASP 源码
<%
pid=request("pid")
Set conn = Server.CreateObject("Adodb.Connection")
conn.open "Provider=microsoft.jet.oledb.4.0;data source=" + server.MapPath("db.mdb")
Set rs = server.CreateObject("Adodb.RecordSet")
sqlstr = "select * from menu where pid=" + pid
rs.open sqlstr,conn,1,1
If rs.eof Then
response.write "none"
Else
response.write("[")
While Not rs.eof
response.write rs("mid")
response.write ","
response.write "'" & escape(rs("mName")) & "'" '防止乱码使用 escape
response.write ","
rs.movenext
Wend
'随便插入一个值,防止 , 结尾
response.write("0]")
End If
rs.close
Set rs = Nothing
conn.close
Set conn = Nothing
%>
<%
pid=request("pid")
Set conn = Server.CreateObject("Adodb.Connection")
conn.open "Provider=microsoft.jet.oledb.4.0;data source=" + server.MapPath("db.mdb")
Set rs = server.CreateObject("Adodb.RecordSet")
sqlstr = "select * from menu where pid=" + pid
rs.open sqlstr,conn,1,1
If rs.eof Then
response.write "none"
Else
response.write("[")
While Not rs.eof
response.write rs("mid")
response.write ","
response.write "'" & escape(rs("mName")) & "'" '防止乱码使用 escape
response.write ","
rs.movenext
Wend
'随便插入一个值,防止 , 结尾
response.write("0]")
End If
rs.close
Set rs = Nothing
conn.close
Set conn = Nothing
%>