[转载]asp.net基于jquery的ajax二级联动

[转载]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">
        &nbsp;
       <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&#91;"CARS_BRAND_TYPE"&#93;.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&#91;"CARS_TYPE"&#93;.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;   
        }   
    }   
}  
  
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏