<!DOCTYPE html>
<html>
<head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Content/jquery-3.1.1.js"></script> <style> #list div { float:left; width:200px; height:200px; border:1px solid #ccc; margin:5px; } li { list-style-type: none; } .a { background:#ffd800; } </style></head><body> <div> <ul id="list"></ul>
</div> <div style="clear:both"></div> <div> <form id="form0"> <p> <input type="hidden" name="Id" /> 收货人:<input type="text" name="Name" /> </p> <p> 手机号:<input type="text" name="Phone" /> </p> <p> 地址:<select name="TIdOne"> <option value="0">--请选择--</option> </select> <select name="TIdTwo"> <option value="0">--请选择--</option> </select> <select name="TIdThree"> <option value="0">--请选择--</option> </select> </p> <p> 详细地址:<textarea name="Remark"></textarea> </p> <p> <input type="button" value="新增" οnclick="add()" /> <input type="button" value="修改" οnclick="upd()" /> <input type="button" value="删除" οnclick="del()" /> </p> </form> </div></body></html><script> $(function () { show(); showTIdOne(); $("[name=TIdOne]").change(function () { showTIdTwo($("[name=TIdOne]").val()); }) $("[name=TIdTwo]").change(function () { showTIdThree($("[name=TIdTwo]").val()); }) }) //一级 function showTIdOne() { $.ajax({ url: "/Addresses/GetRegion?PId=0", type: "post", dataType: "json", async: false, success: function (d) { console.log(d); for (var i = 0; i < d.length; i++) { var op = '<option value="' + d[i].Id + '">' + d[i].Name + '</option>' $("[name=TIdOne]").append(op); } } }) } //二级 function showTIdTwo(pid) { $.ajax({ url: "/Addresses/GetRegion?PId=" + pid, type: "post", dataType: "json", async: false, success: function (d) { console.log(d); $("[name=TIdTwo]").html(""); $("[name=TIdTwo]").append('<option value="0">--请选择--</option>'); for (var i = 0; i < d.length; i++) { var op = '<option value="' + d[i].Id + '">' + d[i].Name + '</option>' $("[name=TIdTwo]").append(op); } } }) } //三级 function showTIdThree(pid) { $.ajax({ url: "/Addresses/GetRegion?PId=" + pid, type: "post", dataType: "json", async: false, success: function (d) { console.log(d); $("[name=TIdThree]").html(""); $("[name=TIdThree]").append('<option value="0">--请选择--</option>'); for (var i = 0; i < d.length; i++) { var op = '<option value="' + d[i].Id + '">' + d[i].Name + '</option>' $("[name=TIdThree]").append(op); } } }) } //显示 function show() { $.ajax({ url: "/Addresses/Query", type: "post", dataType:"json", success: function (d) { console.log(d); for (var i = 0; i < d.length; i++) { var tel = d[i].Name + d[i].Phone.substr(0, 3) + "****" + d[i].Phone.substr(7) var li = '<li><div οnclick="updUse(' + d[i].Id +',this)" ><p>' + tel + '</p><p>' + d[i].TIdOneName + d[i].TIdTwoName + d[i].TIdThreeName + d[i].Remark + '</p></div></li>' $("#list").append(li); } } }) } //新增 function add() { $.ajax({ url: "/Addresses/Add", type: "post", data: $("#form0").serialize(), success: function (d) { console.log(d); if (d > 0) { alert("200"); location.href = '/Addresses/Index'; } } }) } //点击选中 function updUse(id,obj) { console.log(obj); $("#list div").removeClass(); $(obj).addClass("a"); console.log(id); showById(id); } //返填 function showById(id) { $.ajax({ url: "/Addresses/QueryById?Id=" + id, type: "post", dataType:"json", success: function (d) { console.log(d); $("[name=Id]").val(d.Id); $("[name=Name]").val(d.Name); $("[name=Phone]").val(d.Phone); $("[name=TIdOne]").val(d.TIdOne); $("[name=TIdOne]").change(); $("[name=TIdTwo]").val(d.TIdTwo); $("[name=TIdTwo]").change(); $("[name=TIdThree]").val(d.TIdThree); $("[name=Remark]").html(d.Remark); } }) } //修改 function upd() { $.ajax({ url: "/Addresses/Update", type: "post", data: $("#form0").serialize(), success: function (d) { console.log(d); if (d > 0) { alert("200"); location.href = '/Addresses/Index'; } } }) } //删除 function del() { if (confirm("确认删除吗?")) { $.ajax({ url: "/Addresses/Delete?Id=" + $("[name=Id]").val(), type: "post", success: function (d) { console.log(d); if (d > 0) { alert("200"); location.href = '/Addresses/Index'; } } }) } }</script>