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