这个我在做项目的时候也经常用到,最常用的是省市区,栏目等等。。。。。。先记一下这个Js吧
首先html
<div class="form-group"> <label class=" control-label" style="width: 100px; float: left">地区:</label> <div class="col-sm-1" style="line-height: 30px"> @if (ViewData["Province"] != null) { if ((ViewData["Province"] as SelectList).Count() > 0) { @Html.DropDownListFor(o=>o.ProvinceId, ViewData["Province"] as SelectList, new { onchange = "GetCity(this)" }) } } </div> <div class="col-sm-1" style="line-height: 30px"> @if (ViewData["City"] != null) { if ((ViewData["City"] as SelectList).Count() > 0) { @Html.DropDownListFor(o=>o.CityId, ViewData["City"] as SelectList, new { onchange = "GetDistrict(this)" }) } } </div> <div class="col-sm-1" style="line-height: 30px"> @if (ViewData["District"] != null) { if ((ViewData["District"] as SelectList).Count() > 0) { @Html.DropDownListFor(o => o.DistrictId, ViewData["District"] as SelectList, new { id = "District" }) } } </div> </div> </div>
JS
function GetCity(obj) { var val = obj.value; //得到选中值省的Id $.ajax({ url: "/Area/City", data: "ProvinceId=" + val, type: "Post", success: function (data) { $("#CityId").empty();//清除下拉框 $.each(data, function (index, item) { //遍历返回的json $("#CityId").append(‘<option value=‘ + item.CityID + ‘>‘ + item.CityName + ‘</option>‘) })//添加select option var obj1 = data[0].CityID; //得到默认市的value $.ajax({ url: "/Area/District", data: "CityId=" + obj1, type: "Post", success: function (data1) { $("#District").empty();//清除区的下拉框 $.each(data1, function (index, item) { $("#District").append(‘<option value=‘ + item.Id + ‘>‘ + item.DisName + ‘</option>‘) })//把区添加select option } }); } }); } function GetDistrict(obj) { var val = obj.value; $.ajax({ url: "/Area/District", data: "CityId=" + val, type: "Post", success: function (data) { $("#District").empty();//清除下拉框 $.each(data, function (index, item) { $("#District").append(‘<option value=‘ + item.Id + ‘>‘ + item.DisName + ‘</option>‘) })//添加select option } }); }
控制器
public ActionResult City(int ProvinceId) { var model = areaService.GetCityByProvince(ProvinceId); return Json(model); } public ActionResult District(int CityId) { var model = areaService.GetDistrictByCity(CityId); return Json(model); }
常用下拉框
时间: 2024-11-02 16:00:38