2017-6-6 Ajax版頁面無重新整理三級聯動

標籤：重新整理   UI   using   com   build   isp   color   錯誤   代碼   

實現效果：

頁面代碼：

<div>        <select id="sel1" style="width:100px;">                    </select>        <select id="sel2" style="width:100px;">                   </select>        <select id="sel3" style="width:100px;">                    </select>    </div>

Js代碼：

 change(1);    function change(a)    {               if (a == "1")        {            $.ajax({                url: "select.ashx",                data: { "code": "0001" },                type: "post",                dataType: "json",                success: function (msg) {                    $("#sel1").html("");                    for (i in msg)                    {                                              var str = "<option value=‘" + msg[i].code + "‘>" + msg[i].name + "</option>";                        $("#sel1").append(str);                    }                    change(2);                },                error:function()                {                    alert("aaa");                },                beforeSend: function () {                    $("#sel1").html("");                    var str = "<option value=‘null‘>資料正在載入...</option>";                    $("#sel1").append(str);                }            });        }        if (a == "2") {            $.ajax({                url: "select.ashx",                data: { "code": $("#sel1").val() },                type: "post",                dataType: "json",                success: function (msg) {                    $("#sel2").html("");                    for (i in msg) {                                                var str = "<option value=‘" + msg[i].code + "‘>" + msg[i].name + "</option>";                        $("#sel2").append(str);                    }                    change(3);                },                //如果彈窗跳出，代表格服務端路徑錯誤，服務端出錯，服務端沒有返回指定的json資料格式                error: function () {                    alert("aaa");                },                //請求服務端的時候執行（不管對錯）一開始載入資料就會執行                beforeSend: function () {                    $("#sel2").html("");                    var str = "<option value=‘null‘>資料正在載入...</option>";                    $("#sel2").append(str);                },                //處理完畢之後，不管返回到sussess還是error中   資料載入完畢執行                complete:function(){                                }            });        }        if (a == "3") {            $.ajax({                url: "select.ashx",                data: { "code": $("#sel2").val() },                type: "post",                dataType: "json",                success: function (msg) {                    $("#sel3").html("");                    for (i in msg) {                                               var str = "<option value=‘" + msg[i].code + "‘>" + msg[i].name + "</option>";                        $("#sel3").append(str);                    }                },                error: function () {                                   },                beforeSend: function () {                    $("#sel3").html("");                    var str = "<option value=‘null‘>資料正在載入...</option>";                    $("#sel3").append(str);                }            });        }    }    $("#sel1").change(function () {        change(2);    });    $("#sel2").change(function () {        change(3);    });

三級聯動Js代碼

一般處理常式代碼：

using (cityDataClassesDataContext con = new cityDataClassesDataContext())         {            StringBuilder str = new StringBuilder();            str.Append("[");            string aa = context.Request["code"];            int count = 0;            List<ChinaStates> clist = con.ChinaStates.Where(r=>r.ParentAreaCode == aa).ToList();            foreach(ChinaStates ch in clist )            {                if (count > 0) { str.Append(","); }                str.Append( "{\"name\":\""+ch.AreaName+"\",\"code\":\""+ch.AreaCode+"\"}");                count++;            }            str.Append("]");            context.Response.Write(str);            context.Response.End();        }

 

2017-6-6 Ajax版頁面無重新整理三級聯動