简单二级联动

概述：

　　1、小数据二级联动

　　2、大数据二级联动

实现：

　　1、小数据二级联动思路

　　请求一次接口返回所有数据，使用脚本控制第二个下拉选择框的内容。

前台代码：

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

　　<div class="form-group">
　　　　<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 所属库房</label>
　　　　<div class="col-sm-9">
　　　　　　<select id="RoomId" name="RoomId" class="width-40  form-control" data-placeholder="所属库房">
　　　　　　　　@foreach (Father father in (IEnumerable<Father>)ViewBag.Rooms)
　　　　　　　　{
　　　　　　　　　　<option id="[email protected]" value="@father.Id" childs="@father.GetOptionsMark()">@father.Name</option>
　　　　　　　　}
　　　　　　</select>
　　　　</div>
　　</div>
　　<div class="form-group">
　　　　<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 楼层</label>
　　　　<div class="col-sm-9">
　　　　　　<select id="FloorId" name="FloorId" class="width-40  form-control" data-placeholder="楼层">
　　　　　　</select>
　　　　</div>
　　</div>


<script type="text/javascript">
$("#RoomId").change(function () {
        debugger;
        var roomId = $(this).val();
        var childs = $("#option-"+roomId).attr("childs");
        $("#FloorId").html(childs);
    });

</script>

后台代码：

　　二级联动数据模型：

 1     public sealed class Father : Item
 2     {
 3         public IEnumerable<Child> Items { get; set; }
 4 
 5         /// <summary>
 6         /// 获取下拉选项标记
 7         /// </summary>
 8         /// <returns></returns>
 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 + "</option>");
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<Father> 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 或者其他前端组件限制此种行为。