[转载]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; } } }