[转载]asp.net基于jquery的ajax二级联动.
页面代码:
index.aspx
<script src="../ADMIN/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//预先加载第一个select,加载品牌,看好加载的的页面BrandHandler.ashx
$.post('BrandHandler.ashx', {}, function(data) { $("#carbrand").html(data) }, 'html');
//当选择品牌的时候加载二级车系,构成联动
$("#carbrand").change(function() {
$.post('TypeHandler.ashx', { cartype: $(this).val() }, function(data) { $("#cartype").empty().html(data) }, 'html');
});
});
</script>
<table width="950" height="35" border="0" cellpadding="0" cellspacing="0" class="left_tb">
<tr>
<td width="70" align="right" background="../IMAGES/b_4.gif"><img src="../IMAGES/serch_so.gif" width="59" height="17" /></td>
<td width="100" background="../IMAGES/b_4.gif">
<select id="carbrand" name="carbrand" >
<option value="-1">--选择品牌--</option>
</select>
</td>
<td width="105" background="../IMAGES/b_4.gif">
<select id="cartype" name="cartype" >
<option value="-1">--选择车系--</option>
</select>
</td>
<td background="../IMAGES/b_4.gif" style="width:80px">
<a href="###" id="search_type"><img src="../IMAGES/serch.gif" alt="搜索" style="border:0px"/></a>
</td>
<td width="120" background="../IMAGES/b_4.gif">
<input id="TextKeys" type="text" />
</td>
<td width="100" align="left" background="../IMAGES/b_4.gif">
<a href="###" id="search_news"> <img alt="新闻资讯" src="../IMAGES/serch.gif" style="border:0"/></a>
</td>
</tr>
</table>
Hanlder异步处理页面代码:
using System;
using System.Web;
using System.Data;
using System.Text;
using System.Data.SqlClient;
using Tools;
public class BrandHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string ssql = "select * from D_CARS_BRAND_TYPE where CARS_BRAND_TYPE>=-1 order by ORDER_NO asc";
SqlDataReader dr = (SqlDataReader)DataBase.GetDataReader(ssql);
StringBuilder st = new StringBuilder();
while(dr.Read())
{
st.Append("<option value=\"" + dr["CARS_BRAND_TYPE"].ToString() + "\">" + dr["CARS_BRAND_TYPE_NAME"].ToString() + "</option>\n");
}
dr.Close();
context.Response.Write(st.ToString());
}
public bool IsReusable {
get {
return false;
}
}
}
using System;
using System.Web;
using System.Data;
using System.Text;
using System.Data.SqlClient;
using Tools;
public class TypeHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Clear();
int cartype = 0;
if (int.TryParse(context.Request.Form["cartype"].ToString(), out cartype))
{
string ssql = "select * from D_CARS_TYPE where CARS_BRAND_TYPE=" + cartype + " order by ORDER_NO asc";
SqlDataReader dr = (SqlDataReader)DataBase.GetDataReader(ssql);
StringBuilder st = new StringBuilder();
while (dr.Read())
{
st.Append("<option value=\"" + dr["CARS_TYPE"].ToString() + "\">" + dr["CARS_TYPE_NAME"].ToString() + "</option>\n");
}
dr.Close();
context.Response.Write(st.ToString());
}
else
context.Response.Write("<option value='1'>--出现错误--</option>");
}
public bool IsReusable
{
get
{
return false;
}
}
}
Mikel