2017-6-6 Ajax版頁面無刷新三級聯動
阿新 • • 發佈:2017-06-07
實現 aps hid null .cn acl js代碼 classes nbsp
實現效果:
頁面代碼:
<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) { $(三級聯動Js代碼"#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); });
一般處理程序代碼:
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版頁面無刷新三級聯動