ajax 三級聯動

標籤：uil   聯動   UI   oid   one   script   state   builder   url   

  

<select class="st" id="st1">                <option value="null">載入中...</option>            </select>            <select class="st" id="st2">                <option value="null">載入中...</option>            </select>            <select class="st" id="st3">                <option value="null">載入中...</option>            </select>

3個select  

<script type="text/javascript">    statesload(‘1‘);    function statesload(a) {        if (a == "1") {            $.ajax({                url: "ccc.ashx",                data: { "pcode": "0001" },                type: "post",                dataType: "json",                success: function (msg) {                    $("#st1").html(‘‘);                    for (i in msg) {                        var str = "<option value=‘" + msg[i].code + "‘>" + msg[i].name + "</option>";                        $("#st1").append(str);                    }                    statesload(‘2‘);                },                beforeSend: function () {                    $("#st1").html(‘‘);                    $("#st1").append("<option value=‘null‘>載入中...</option>");                }            });        }        if (a == "2") {            $.ajax({                url: "ccc.ashx",                data: { "pcode": $("#st1").val() },                type: "post",                dataType: "json",                success: function (msg) {                    $("#st2").html(‘‘);                    for (i in msg) {                        var str = "<option value=‘" + msg[i].code + "‘>" + msg[i].name + "</option>";                        $("#st2").append(str);                    }                    statesload(‘3‘);                },                beforeSend: function () {                    $("#st2").html(‘‘);                    $("#st2").append("<option value=‘null‘>載入中...</option>");                }            });        }        if (a == "3") {            $.ajax({                url: "ccc.ashx",                data: { "pcode": $("#st2").val() },                type: "post",                dataType: "json",                success: function (msg) {                    $("#st3").html(‘‘);                    for (i in msg) {                        var str = "<option value=‘" + msg[i].code + "‘>" + msg[i].name + "</option>";                        $("#st3").append(str);                    }                },                beforeSend: function () {                    $("#st3").html(‘‘);                    $("#st3").append("<option value=‘null‘>載入中...</option>");                }            });        }    }    $("#st1").change(function () {        statesload(‘2‘);    });    $("#st2").change(function () {        statesload(‘3‘);    });</script>

jquery

 

後台

public void ProcessRequest(HttpContext context)    {        System.Threading.Thread.Sleep(2000);        StringBuilder str = new StringBuilder();        str.Append("[");        string s = context.Request["pcode"];        using (mydbDataContext con = new mydbDataContext())        {            int count = 0;            List<ChinaStates> clist = con.ChinaStates.Where(r => r.ParentAreaCode == s).ToList();            foreach (ChinaStates c in clist)            {                if (count > 0) str.Append(",");                str.Append("{\"code\":\"" + c.AreaCode + "\",\"name\":\"" + c.AreaName + "\"}");                count++;            }        }        str.Append("]");        context.Response.Write(str);        context.Response.End();    }

View Code

 

ajax 三級聯動