@{
Layout = null;
}
<!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;
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="新增" onclick="add()" />
<input type="button" value="修改" onclick="upd()" />
<input type="button" value="删除" onclick="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 onclick="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>