多级联动实现，附源码。当前，部分代码是参与博客园其它网友。
新增，前台代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<script src=
"~/Scripts/jquery-1.10.2.js"
></script>
<script type=
"text/javascript"
>
$(function () {
GetProvince();
//加载省份
$(
"#Province"
).change(function () {
GetCity();
});
});
function GetProvince() {
// $("#Province").empty();
$.getJSON(
"/Home/GetProvincelist"
,
function (data) {
$.each(data, function (i, item) {
$(
"<option></option>"
).val(item[
"PID"
]).text(item[
"ProvinceName"
]).appendTo($(
"#Province"
));
})
});
// GetCity();
}
function GetCity() {
$(
"#City"
).empty();
$.getJSON(
"/Home/GetCitylist"
,
{ pid: $(
"#Province"
).val() },
function (data) {
$.each(data, function (i, item) {
$(
"<option></option>"
).val(item[
"Value"
]).text(item[
"Text"
]).appendTo($(
"#City"
));
})
});
}
</script>
<div style=
"margin:50px 0"
>
<span>省份：</span>
<
select
id=
"Province"
>
<option>请选择</option>
</
select
>
<span>市：</span>
<
select
id=
"City"
>
<option>请选择</option>
</
select
>
</div>
|
后台代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
/// <summary>
/// 模拟省份数据
/// </summary>
/// <returns></returns>
public
List<Province> Provincelist()
{
List<Province> list =
new
List<Province>();
list.Add(
new
Province() { PID = 1, ProvinceName =
"广东"
});
list.Add(
new
Province() { PID = 2, ProvinceName =
"北京"
});
list.Add(
new
Province() { PID = 3, ProvinceName =
"上海"
});
list.Add(
new
Province() { PID = 4, ProvinceName =
"河北"
});
list.Add(
new
Province() { PID = 5, ProvinceName =
"贵州"
});
list.Add(
new
Province() { PID = 6, ProvinceName =
"云南"
});
return
list;
}
/// <summary>
/// 模拟城市数据
/// </summary>
/// <returns></returns>
public
List<City> Citylist()
{
List<City> cityList =
new
List<City>();
cityList.Add(
new
City() { CID = 1, PID = 1, CityName =
"广州"
});
cityList.Add(
new
City() { CID = 2, PID = 1, CityName =
"深圳"
});
cityList.Add(
new
City() { CID = 3, PID = 1, CityName =
"惠州"
});
cityList.Add(
new
City() { CID = 4, PID = 1, CityName =
"湛江"
});
cityList.Add(
new
City() { CID = 5, PID = 2, CityName =
"北京"
});
cityList.Add(
new
City() { CID = 6, PID = 3, CityName =
"上海"
});
cityList.Add(
new
City() { CID = 7, PID = 4, CityName =
"唐山市"
});
cityList.Add(
new
City() { CID = 8, PID = 4, CityName =
"保定市"
});
cityList.Add(
new
City() { CID = 9, PID = 4, CityName =
"张家口市"
});
return
cityList;
}
/// <summary>
/// 获取省份
/// </summary>
public
JsonResult GetProvincelist()
{
var
list = Provincelist();
return
Json(list, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// 获取城市
/// </summary>
/// <param name="pid"></param>
/// <returns></returns>
public
JsonResult GetCitylist(
int
pid)
{
var
citys = Citylist().Where(m => m.PID == pid).ToList();
List<SelectListItem> item =
new
List<SelectListItem>();
foreach
(
var
City
in
citys)
{
item.Add(
new
SelectListItem { Text = City.CityName, Value = City.CID.ToString() });
}
return
Json(item, JsonRequestBehavior.AllowGet);
}
|
编辑逻辑：
模型ProvinceViewModel：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
public
class
ProvinceViewModel
{
/// <summary>
/// 省份ID
/// </summary>
public
int
PID {
get
;
set
; }
/// <summary>
/// 城市ID
/// </summary>
public
int
CID {
get
;
set
; }
}
|
前台：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<script src=
"~/Scripts/jquery-1.10.2.js"
></script>
<script type=
"text/javascript"
>
$(function () {
//GetProvince(); //加载省份
GetCity();
//省份变动，加载城市
$(
"#Province"
).change(function () {
GetCity();
});
});
function GetProvince() {
// $("#Province").empty();
$.getJSON(
"/Home/GetProvincelist"
,
function (data) {
$.each(data, function (i, item) {
$(
"<option></option>"
).val(item[
"PID"
]).text(item[
"ProvinceName"
]).appendTo($(
"#Province"
));
})
});
// GetCity();
}
function GetCity() {
$(
"#City"
).empty();
$.getJSON(
"/Home/GetCitylist"
,
{ pid: $(
"#Province"
).val() },
function (data) {
$.each(data, function (i, item) {
$(
"<option></option>"
).val(item[
"Value"
]).text(item[
"Text"
]).appendTo($(
"#City"
));
})
});
}
</script>
<div style=
"margin:50px 0"
>
<span>省份：</span>
@Html.DropDownListFor(model => model.PID, ViewBag.ProvinceList
as
IEnumerable<SelectListItem>,
"＝请选择＝"
,
new
{ @
class
=
"form-control"
, id =
"Province"
})
<span>市：</span>
@Html.DropDownListFor(model => model.CID,ViewBag.CityList
as
IEnumerable<SelectListItem>,
"＝请选择＝"
,
new
{ @
class
=
"form-control"
, id =
"City"
})
</div>
|
后台：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
public
ActionResult Edit()
{
ViewBag.ProvinceList = Provincelist().Select(m =>
new
SelectListItem()
{
Text = m.ProvinceName,
Value = m.PID.ToString(),
Selected = (m.PID == 4)
//测试，默认让它绑定第四个
}).ToList();
ViewBag.CityList = Citylist().Select(m =>
new
SelectListItem()
{
Text = m.CityName,
Value = m.CID.ToString(),
Selected = (m.CID == 8)
//测试，默认让它绑定第四个
}).ToList();
return
View();
}
|
实际上，增加和编辑是完成可以合成同一个页面的，这里就不演示了。