AJAX 三級聯動

標籤：hid   response   url   value   ble   select   turn   state   func   

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>

View Code

一般應用程式代碼

<%@ WebHandler Language="C#" Class="select" %>using System;using System.Web;using System.Linq;  //引用linqusing 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;        }    }}

View Code

 

AJAX 三級聯動