MVC三级联动下拉框

1.Controller页面 设置列表值，并在前台展示
            IAreaBll abll = new AreaBll();
            List<Area> Alist = abll.Search(x => x.ParentCode == 0);
            SelectList Arealist = new SelectList(Alist, "Code", "Name");
            ViewData["province"] = Arealist;

public ActionResult GetCity(int code)
        {
            List<Area> areList = abll.Search(x => x.ParentCode == code);

            return Json(areList, JsonRequestBehavior.AllowGet);
        }

2.View视图
           <div>
                    <label>所在省</label>
                    <div>
                        @Html.DropDownListFor(x=>x.Province, (SelectList)ViewData["province"], "请选择", new { style = "width:300px", @class = "layui-input" })   
                </div></div>
                <div>
                    <label>所在市</label>
                    <div >
                        <select name="City" id="City" >
                            <option value="-1">请选择</option>
                        </select>                       
                    </div>
                </div>

              

3.通过页面加载后change事件实现联动 
 $("#Province").change(function () {
                $("#City").find("option").remove;//清空选择后的下拉框
                $("#City option:not(:first)").remove();
                var province=$("#Province").val();
                $.ajax({
                    type:'GET',
                    url:'/Commodity/GetCity?Code='+province,
                    dataType:'json',
                    success:function(data){
                        for(var i = 0;i<data.length;i++){
                            $("#City").append("<option value='"+data[i].Code+"'>"+ data[i].Name+"</option>");
                        }
                    }
                })
            })

联动是 触发change() 事件，只有鼠标点选了下拉列表才会触发，如果上来二三级下拉列表也绑定，那么点选一后，二自动变换，此时再去点选三，就不是二联动过去