jQ 二级类别联动 

<script src="jquery.js" type="text/javascript"></script>
<script src="selectJx.js" type="text/javascript"></script>
<title>二级联动ajax</title>
<%
	'++++++++++++++++++++++++++++++++数据库链接 Start +++++++++++++++++++++++++++++++++++++++
	  response.Buffer = true
	  db="diqu.mdb"
	  set Conn = server.CreateObject("adodb.connection")
	  cnnstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(db)
	  Conn.open cnnstr
	  if err then
		 err.clear
		 set Conn = nothing
		 response.Write ""
		 response.End()
	  end if
	  sub closecnn()
		  set Conn = nothing
	  end sub	  	 
	'++++++++++++++++++++++++++++++++数据库链接 End +++++++++++++++++++++++++++++++++++++++
%>
<%Session.CodePage=936%>
</head>
<body>
<div >
<table class='itable' width='100%' id='timetable' > 
	<tr> 
    	<td class="test_c" id="one">   
        <select id="region" name="region" onchange="getarea('Gbk.asp?ac=1','region','area');">  
        <option value="">请选择</option>   
<%
sql="select * from class1 order by id"
set rs=server.CreateObject("adodb.recordset")
rs.open sql,conn,1,1
if not rs.eof then
for i=1 to rs.recordcount
%>
		<option value="<%=rs("class1")%>"><%=rs("class1")%></option>
<%
rs.movenext
next
end if
rs.close
set rs=nothing
%>    
        </select>  
        </td> 
    </tr> 
    <tr>  
    	<td>   
        <select id="area" name="area" onchange="getarea('Gbk.asp?ac=2','area','xiaoqu');">   
        </select>  
        <select id="xiaoqu" name="xiaoqu">   
        </select>  
        </td> 
    </tr> 
</table> 
</div>

提交页

 

// JavaScript Document
function getarea(pages,class1,class2){ 
var cityid = $("#"+class1).val();//获得下拉框中大区域的值  
	if(cityid != ''){  
		$.ajax({  
			type: "post",  
			url: pages,//AJAX 异步页面 如：b.asp  
			data:"city="+cityid,   //页面参数 如：region_id=region_id
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			//contentType: "application/x-www-form-urlencoded; charset=gb2312",
			cache:false,  
			beforeSend: function(XMLHttpRequest){},  
			success: function(data, textStatus){
			   //alert(data);    
			   $("#"+class2).empty();//清空area下拉框    
			   $("#"+class2).append(data);//给area下拉框添加option    
			   },  
		   complete: function(XMLHttpRequest, textStatus){},  
		   error: function(){
				   //请求出错处理 
			   } 
		   }); 
	}
}

 ajax 跳转接受

 

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%Session.CodePage=65001
city=trim(request("city"))
ac=trim(request("ac"))
if city<>"" then
	'++++++++++++++++++++++++++++++++数据库链接 Start +++++++++++++++++++++++++++++++++++++++
	  response.Buffer = true
	  db="diqu.mdb"
	  set Conn = server.CreateObject("adodb.connection")
	  cnnstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(db)
	  Conn.open cnnstr
	  if err then
		 err.clear
		 set Conn = nothing
		 response.Write ""
		 response.End()
	  end if
	  sub closecnn()
		  set Conn = nothing
	  end sub	  	 
	'++++++++++++++++++++++++++++++++数据库链接 End +++++++++++++++++++++++++++++++++++++++
	if ac=1 then
		sql="select * from class2 where class1='"&city&"' order by id"
		set rs=server.CreateObject("adodb.recordset")
		rs.open sql,conn,1,1
		if not rs.eof then

		for i=1 to rs.recordcount
			response.Write("<option value='"&rs("class2")&"'>"&rs("class2")&"</option><br/>")
			rs.movenext
		next
		end if
		rs.close
		set rs=nothing
	elseif ac=2 then
		sql="select * from class3 where class2='"&city&"' order by id"
		set rs=server.CreateObject("adodb.recordset")
		rs.open sql,conn,1,1
		if not rs.eof then
		for i=1 to rs.recordcount
			response.Write("<option value='"&rs("class3")&"'>"&rs("class3")&"</option><br/>")
			rs.movenext
		next
		end if
		rs.close
		set rs=nothing
	end if
else
		response.Write("<option value='0'>错误</option>")
end if


%>

 

接受。。查询。返回页

 

posted @ 2013-08-02 17:24  哈达波斯网络  阅读(231)  评论(0)    收藏  举报