首页 > 代码库 > 常用下拉框

常用下拉框

2024-07-17 09:21:45   229人阅读

这个我在做项目的时候也经常用到,最常用的是省市区，栏目等等。。。。。。先记一下这个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=http://www.mamicode.com/‘ + 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=http://www.mamicode.com/‘ + 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=http://www.mamicode.com/‘ + 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);        }

 


联系
我们