常用下拉框

这个我在做项目的时候也经常用到,最常用的是省市区，栏目等等。。。。。。先记一下这个Js吧

首先html

                  <div class="form-group">
                            <label class=" control-label" style=" 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);
        }