简单二级联动

概述：
　　1、小数据二级联动

2、大数据二级联动

实现：
　　1、小数据二级联动思路
　　请求一次接口返回所有数据，使用脚本控制第二个下拉选择框的内容。

前台代码：

其中： childs 中存的是动态生成的 标记。
　　

　　　　 所属库房
　　　　

　　　　　　
　　　　　　　　@foreach (Father father in (IEnumerable)ViewBag.Rooms)
　　　　　　　　{
　　　　　　　　　　@father.Name
　　　　　　　　}
　　　　　　
　　　　

　　

　　

　　　　 楼层
　　　　

　　　　　　
　　　　　　
　　　　

　　

后台代码：

二级联动数据模型：

1 public sealed class Father : Item
2 {
3 public IEnumerable Items { get; set; }
4
5 ///
6 /// 获取下拉选项标记
7 ///
8 ///
9 public string GetOptionsMark()
10 {
11 StringBuilder sb = new StringBuilder();
12 foreach (var item in Items)
13 {
14 sb.Append("<option value="" + item.Id + “”>" + item.Name + “”);
15 }
16 return sb.ToString();
17 }
18 }
19
20 public sealed class Child : Item
21 {
22 }
23
24 public abstract class Item
25 {
26 public int Id { get; set; }
27 public string Name { get; set; }
28 }
View Code
准备数据：

private IEnumerable GetRooms(List<Stock_Room> rooms)
{
var roomIds = rooms.Select(m => m.Id);
　　　　　　　//从数据库获取数据 sql: select * from xx where roomId in roomIds 换成自己的 Dao 或 service 层。
var floorsCatch = _floorService.Value.GetFloors(roomIds);
return rooms.Select(m => new Father
{
Id = m.Id,
Name = m.Name,
Items = floorsCatch.Where(n => n.RoomId == m.Id && n.IsEnable == true)
.Select(n => new Child { Id = n.Id, Name = n.Name })
});
}
使用 ajax 获取数据或 mvc 使用 viewbag 都行。

记录一下这个非常简单的二级联动，如果是用其他 UI 组件最好还是用人家写好的。

2、大数据二级联动实现思路
如果数据比较大，每一次第一个下拉框切换的时候都要请求一下后台，获取 json 数据，

前台修改 select 的html 内容，如果内容过多，建议修改 options 多删少填，并修改其中的text 值和value 值。

需要注意的是，如果数据量较大，响应时间过长，需要进行页面级的限制。

比如当用户快速下拉选择，短时间发送多个请求时，服务器响应不及时，脚本堵塞。

这时候需要借助 js 或者其他前端组件限制此种行为。