首页 > 其他 > 详细

常用下拉框

时间:2014-08-13 17:52:57      阅读:344      评论:0      收藏:0      [点我收藏+]

这个我在做项目的时候也经常用到,最常用的是省市区,栏目等等。。。。。。先记一下这个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);
        }

 

常用下拉框,布布扣,bubuko.com

常用下拉框

原文:http://www.cnblogs.com/llxy/p/3910369.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!