AJAX 三级联动

html代码

<select id="str1">
<option>加载中...</option>
</select>
<select id="str2">
<option>加载中...</option>
</select>
<select id="str3">
<option>加载中...</option>
</select>

 

jquery代码  AJAX

<script type="text/javascript">


    str_load(1);
    str_load(2);
    str_load(3);

    function str_load(aa) {
        if (aa == "1")
        {
            $.ajax({
                url: "select.ashx",
                data: { "code": "0001" },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#str1").empty();
                    for (i in msg)
                    {
                        var ss = "<option value='" + msg[i].areacode + "'>" + msg[i].areaname + "</option>";
                        $("#str1").append(ss);
                    }
                   
                }, error: function () { alert('error'); },
                beforeSend: function () { $("#str1").append("<option>加载中...<option>"); },
                complete: function () { str_load(2); }
            });
        }
        if (aa == "2")
        {
            $.ajax({
                url: "select.ashx",
                data: { "code": $("#str1").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#str2").empty();
                    for (i in msg) {
                        var ss = "<option value='" + msg[i].areacode + "'>" + msg[i].areaname + "</option>";
                        $("#str2").append(ss);
                    }
                    
                }, error: function () { alert('error'); },
                beforeSend: function () { $("#str2").append("<option>加载中...<option>"); },
                complete: function () { str_load(3); }
            });

        }
        if (aa == "3")
        {
            $.ajax({
                url: "select.ashx",
                data: { "code": $("#str2").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#str3").empty();
                    for (i in msg) {
                        var ss = "<option value='" + msg[i].areacode + "'>" + msg[i].areaname + "</option>";
                        $("#str3").append(ss);
                    }
                }, error: function () { alert('error'); },
                beforeSend: function () { $("#str3").append("<option>加载中...<option>"); },
                complete: function () { }
            });

        }

    }

    $("#str1").change(function () { str_load(2); str_load(3); });
    $("#str2").change(function () { str_load(3); })

</script>

一般应用程序代码

<%@ WebHandler Language="C#" Class="select" %>

using System;
using System.Web;
using System.Linq;  //引用linq
using System.Collections.Generic;//引用集合
using System.Text;  
public class select : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string code=context.Request["code"];
        StringBuilder str = new StringBuilder();
        str.Append("[");
        using (chinaDataContext con = new chinaDataContext())
        {
            List<ChinaStates> chlist = con.ChinaStates.Where(r => r.ParentAreaCode == code).ToList();
            int count = 0;
            foreach (ChinaStates ch in chlist)
            {
                if (count > 0) str.Append(",");
               str.Append( "{\"areaname\":\""+ch.AreaName+"\",\"areacode\":\""+ch.AreaCode+"\"}");
                count++;
            }
        }
        str.Append("]");
        context.Response.Write(str);
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}