Question

ASP中如何实现单表的三级联动下拉框

本人现在正在做一个有三级联动下拉框的ASP页面,数据库里就只要查询一张表,字段名分别为ID，名称，上级ID。
因为查了很多都是多表查询，想问下各位高手单表要如何实现三级联动，能有代码示范更好。

附：三个下拉框的查询语句
sql1=select * from 表 where ID = '1-__'
sql2=select * from 表 where 上级ID = sql1中的id
sql3=select * from 表 where 上级ID = sql2中的id
第一位朋友，很感谢你的帮助。但我在ASP和AJAX上都是新手，对你的代码不是很懂，能不能讲解一下？
我看你是不是总共写了三个页面？还有HTML页面。
我的要求是要在一个ASP页面上实现联动下拉框的功能的。
如果有现成的代码的话发到我的邮箱里也可以。
hongxiaofen@163.com

Answer 1

用Ajax实现
-----服务器代码 ASP 动态查询数据库并生产XML格式： getXML.asp----------
<script language ="javascript" runat="server" >
var col, xmlRecords,xmlBody,fieldCount
try{
Response.Expires=-1
Response.ContentType="text/xml"
Response.CharSet="UTF-8"

var _id =decodeURIComponent( Request("sqlcmd") )

var sql = "select * from 条目 where 上级=" + _id +" order by 标识"

xmlBody= "<?xml version='1.0' encoding='UTF-8'?>"
+"<xmlRoot>"
+"<ErrMsg></ErrMsg>"
+"<checkSQL><![CDATA["+ sql + "]]></checkSQL>"
+"<records></records>"
+"</xmlRoot>"

var cnStr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("trees.mdb")

var cn=Server.CreateObject("ADODB.Connection")
var rs=Server.CreateObject("ADODB.Recordset")

cn.Open(cnStr)
rs = cn.execute(sql)
fieldCount = rs.Fields.Count

for( xmlRecords = new Array(); !rs.EOF ; rs.MoveNext())
{
xmlRecords.push("<record>")

for(col=0; col< fieldCount ; col++)
{
xmlRecords.push("<_" )
xmlRecords.push(rs.Fields.Item(col).Name)
xmlRecords.push("><![CDATA[")

xmlRecords.push( String( rs.Fields.Item(col)).replace(/(\]\]\>)/g,"] ]>") )

xmlRecords.push("]]></_" )
xmlRecords.push(rs.Fields.Item(col).Name)
xmlRecords.push(">")
}

xmlRecords.push("</record>")
}
rs.Close()
cn.Close()

xmlBody=xmlBody.replace("<records></records>" ,"<records>"+ xmlRecords.join("") +"</records>")
}
catch(e)
{
xmlBody=xmlBody.replace("<ErrMsg></ErrMsg>" ,"<ErrMsg><![CDATA["+ e.message + "]]></ErrMsg>")
}

Response.Write(xmlBody)
Response.End
delete cn
delete rs
</script>
=================================================================

-------------------客户端：Ajax.JS------------
function createXMLHttpRequest()
{
var request = false;
if(window.XMLHttpRequest)
{
request = new XMLHttpRequest();
if(request.overrideMimeType)
{
request.overrideMimeType('text/xml');
}
}
else if(window.ActiveXObject)
{
var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
for(var i=0; i<versions.length; i++)
{
try {
request = new ActiveXObject(versions[i]);
if(request){
return request;
}
}catch(e){}
}
}
return request;
}

function Ajax( sql ,callBackFunction)
{
sql = "sqlcmd=" + encodeURIComponent( sql )

var httprq = createXMLHttpRequest()
httprq.open("POST","getXML.asp",true)
httprq.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8")
httprq.setRequestHeader("Content-Length",sql.length)

httprq.onreadystatechange=function()
{
try{
if(httprq.readyState==4)
{
var domXML = httprq.responseXML

errNode = domXML.documentElement.getElementsByTagName( "ErrMsg")[0].childNodes

if(errNode.length==0 ){
callBackFunction( domXML )
}
else{
sqlNode = domXML.documentElement.getElementsByTagName( "checkSQL")[0].childNodes
alert( errNode[0].nodeValue +"\nSQL:" + sqlNode[0].nodeValue )
}
}
}catch(e){
alert("onreadystatechange(1)" + e.message)
}
}
httprq.send( sql )
}
//-----------------------------------------
function XMLRead( _domXML )
{
try{
this.domRoot=_domXML.documentElement;
this.records = this.domRoot.getElementsByTagName( "record");
this.rowCount =this.records.length;
this.fieldCount =0;
this.row =0;

if(this.rowCount>0)
{
var firstRow = this.records[0];
this.fieldCount = firstRow.childNodes.length;
}

this.EOF=function(){return this.row>=this.rowCount;}
this.fields=function( field )
{
try{
var isSuc =this.rowCount>0 && this.row<this.rowCount && this.row>=0;
if( isSuc )
{
var col = /^[0-9]+$/g.test( field )?field:this.fields[ "_" + field.toUpperCase() ];
return this.records[this.row].childNodes[ Number(col) ].childNodes[0].nodeValue;
}
else return "row: " + this.row +" -->Over";
}catch(e){return "Field: " +field+" -->undefined";}
}
for( i=0;i< this.fieldCount ;i++)
{
var tagName = firstRow.childNodes[i].tagName.toUpperCase()
this.fields[i]=tagName.replace("_","")
this.fields[ tagName ]=i
}
this.moveFirst=function(){ var isSuc =this.rowCount>0; this.row=0;return isSuc;}
this.moveLast=function() { var isSuc =this.rowCount>0; isSuc?this.row=this.rowCount -1:""; return isSuc;}
this.movePrev=function() { var isSuc =this.rowCount>0 && this.row>0; this.row -= isSuc?1:0;return isSuc;}
this.moveNext=function() { var isSuc =this.rowCount>0 && this.row<this.rowCount-1; this.row+=this.row<this.rowCount?1:0; return isSuc;}
this.move=function( setRow )
{
var isSuc = typeof( setRow )!= "undefined" && setRow !=null;
isSuc = isSuc?/^[\-]?[0-9]+$/g.test(setRow):false;
this.row=isSuc?Number(setRow):0;
return isSuc;
}
return this;
}
catch(e){ alert("dataReader()" + e.message) }
}

--------------------HTML：test.html----------------------------
<html>
<head>
<script language="javascript" src="ajax.js"></script>
<script>
var currSel = null;

function toSelect( xmlDom )
{ var txt ,val
currSel.innerHTML=""
var rs = new XMLRead( xmlDom )
currSel.options.add(new Option( "-请选择-" , "999999") )
for( ; !rs.EOF() ; rs.moveNext() )
{
txt=rs.fields("地名")
val=rs.fields("ID")
currSel.options.add(new Option( txt ,val ) )
}
}

function ajaxGet( obj , nextSel)
{
Ajax( obj.value , toSelect )
currSel = nextSel
}

window.onload=function()
{
var country = document.getElementById("Country")
Ajax( "0" , toSelect )
currSel = country
}
</script>
</head>

<body>
<div>
<select id="Country" onchange="ajaxGet(this, $('Province') )"></select>
<select id="Province" onchange="ajaxGet(this, $('City') )"><option value="999999">-请选择-</option></select>
<select id="City" onchange="ajaxGet(this, $('Town') )"><option value="999999">-请选择-</option></select>
<select id="Town" ><option value="999999">-请选择-</option></select>
</div>
</body>
</html>

Answer 2

你抄我的，我抄你的，何日是个头？

Answer 3

恩.呵呵...ajax是最好办的了..我以前帮朋友做过四级联动的.