概述：

　　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     }

準備資料：

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 或者其他前端元件限制此種行為。