简单二级联动

　　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 >
　　　　　　　　@foreach (Father father in (IEnumerable<Father>)ViewBag.Rooms)
　　　　　　　　{
　　　　　　　　　　<option >@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 >
　　　　　　</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