谁有JQery实例第五讲级联下拉菜单的全部代码???包括给服务器端赋值的js代码!

解决方案 »

  1.   

     #region 注册新账户
            public ActionResult Register()
            {
                ViewBag.ProvinceList = db.GetList<Province>();
                ViewBag.CityList = db.GetList<District>("CityID = 1");
                return View();
            }
            #endregion        #region 省市级联
            public ActionResult GetCity(string id)
            {
                return Json(db.GetList<City>("ProvinceID = " + id), JsonRequestBehavior.AllowGet);
            }        public ActionResult GetDistrict(string id)
            {
                return Json(db.GetList<District>("CityID = " + id),JsonRequestBehavior.AllowGet);
            }
            #endregion
    @using BM.Web.Models@model BM.Web.Models.User@{
        ViewBag.Title = "Add";
        List<Province> pro = ViewBag.ProvinceList;
        List<District> dis = ViewBag.CityList;
        
        <script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
        <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            $(function () {
                //选择省
                $("#proSel").change(function () {
                    $("#citySel").empty();//清空select                $.getJSON("/Login/GetCity/" + $("#proSel").val(), function (data) {
                        $.each(data, function (i, item) {
                            $("<option></option>").val(item["CityID"]).text(item["CityName"]).appendTo($("#citySel"));
                        })
                        //
                        $("#disSel").empty();//清空select                    $.getJSON("/Login/GetDistrict/" + $("#citySel").val(), function (data) {
                            $.each(data, function (i, item) {
                                $("<option></option>").val(item["DistrictID"]).text(item["DistrictName"]).appendTo($("#disSel"));
                            })
                        })
                    })
                })
                //选择城市
                $("#citySel").change(function () {
                    $("#disSel").empty();//清空select                $.getJSON("/Login/GetDistrict/" + $("#citySel").val(), function (data) {
                        $.each(data, function (i, item) {
                            $("<option></option>").val(item["DistrictID"]).text(item["DistrictName"]).appendTo($("#disSel"));
                        })
                    })
                })
            })
        </script>
        
        <script type="text/javascript">
            $(function () {
                $("form").validate({
                    rules: {
                        UserName: {
                            required: true
                        },
                        NickName: {
                            required: true
                        },
                        UserPwd: {
                            required: true,
                            minlength: 5
                        },
                        Email: {
                            required: true,
                            email: true
                        },
                        PostDate: {
                            required: true,
                            dateISO: true
                        },
                        Phone: {
                            required: true,
                            regex: "/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/"
                        }
                    },
                    messages: {
                        //对应该每一个规则,显示提示的信息
                        UserName: {
                            required: "请输入UserName"
                        },
                        NickName: {
                            required: "请输入NickName"
                        },
                        UserPwd: {
                            required: "请输入UserPwd",
                            minlength: jQuery.format("密码不能少于{0}个字符")
                        },
                        Email: {
                            required: "请输入Email地址",
                            email: "请输入正确的Email地址"
                        },
                        PostDate: {
                            required: "请输入日期",
                            dateISO: "请输入合法的日期"
                        },
                        Phone: {
                            required: "请输入Phone",
                            regex: "请输入正确的Phone"
                        }
                    }
                })
            })
        </script>
    }<h2>Add</h2><script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>@using (Html.BeginForm()) {
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>User</legend>        <div class="editor-label">
                @Html.LabelFor(model => model.UserName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.UserName)
                @Html.ValidationMessageFor(model => model.UserName)
            </div>        <div class="editor-label">
                @Html.LabelFor(model => model.UserPwd)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(model => model.UserPwd)
                @Html.ValidationMessageFor(model => model.UserPwd)
            </div>        <div class="editor-label">
                @Html.LabelFor(model => model.NickName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.NickName)
                @Html.ValidationMessageFor(model => model.NickName)
            </div>        <div class="editor-label">
                @Html.LabelFor(model => model.RealName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.RealName)
                @Html.ValidationMessageFor(model => model.RealName)
            </div>        <div class="editor-label">
                @Html.LabelFor(model => model.UserPhoto)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.UserPhoto)
                @Html.ValidationMessageFor(model => model.UserPhoto)
            </div>        <div class="editor-label">
                @Html.LabelFor(model => model.Email)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Email)
                @Html.ValidationMessageFor(model => model.Email)
            </div>        <div class="editor-label">
                @Html.LabelFor(model => model.Phone)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Phone)
                @Html.ValidationMessageFor(model => model.Phone)
            </div>        <div class="editor-label">
                @Html.LabelFor(model => model.ProvinceID)
            </div>
            <div class="editor-field">
                <select id="proSel" name="proSel">
                    @for (int i = 0; i < pro.Count; i++)
                    {
                        <option value="@pro[i].ProvinceID">@pro[i].ProvinceName</option>
                    }
                </select>
            </div>        <div class="editor-label">
                @Html.LabelFor(model => model.CityID)
            </div>
            <div class="editor-field">
                <select id="citySel" name="citySel">
                    <option value="1">北京市</option>
                </select>
            </div>        <div class="editor-label">
                @Html.LabelFor(model => model.DistrictID)
            </div>
            <div class="editor-field">
               <select id="disSel" name="disSel">
                    @for (int i = 0; i < dis.Count; i++)
                    {
                        <option value="@dis[i].DistrictID">@dis[i].DistrictName</option>
                    }
                </select>
            </div>        <div class="editor-label">
                @Html.LabelFor(model => model.PostDate)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.PostDate)
                @Html.ValidationMessageFor(model => model.PostDate)
            </div>        <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    }<div>
        @Html.ActionLink("Back to List", "Index")
    </div>
    MVC中的,自己参照吧
      

  2.   

    #region 注册新账户
            public ActionResult Register()
            {
                ViewBag.ProvinceList = db.GetList<Province>();
                ViewBag.CityList = db.GetList<District>("CityID = 1");
                return View();
            }
            #endregion        #region 省市级联
            public ActionResult GetCity(string id)
            {
                return Json(db.GetList<City>("ProvinceID = " + id), JsonRequestBehavior.AllowGet);
            }        public ActionResult GetDistrict(string id)
            {
                return Json(db.GetList<District>("CityID = " + id),JsonRequestBehavior.AllowGet);
            }
            #endregion@using BM.Web.Models@{
        ViewBag.Title = "注册";
        List<Province> pro = ViewBag.ProvinceList;
        List<District> dis = ViewBag.CityList;
        
        <script type="text/javascript">
            $(function () {
                //选择省
                $("#proSel").change(function () {
                    $("#citySel").empty();//清空select                $.getJSON("/Login/GetCity/" + $("#proSel").val(), function (data) {
                        $.each(data, function (i, item) {
                            $("<option></option>").val(item["CityID"]).text(item["CityName"]).appendTo($("#citySel"));
                        })
                        //
                        $("#disSel").empty();//清空select                    $.getJSON("/Login/GetDistrict/" + $("#citySel").val(), function (data) {
                            $.each(data, function (i, item) {
                                $("<option></option>").val(item["DistrictID"]).text(item["DistrictName"]).appendTo($("#disSel"));
                            })
                        })
                    })
                })
                //选择城市
                $("#citySel").change(function () {
                    $("#disSel").empty();//清空select                $.getJSON("/Login/GetDistrict/" + $("#citySel").val(), function (data) {
                        $.each(data, function (i, item) {
                            $("<option></option>").val(item["DistrictID"]).text(item["DistrictName"]).appendTo($("#disSel"));
                        })
                    })
                })
            })
        </script>
    }<h2>Register</h2><select id="proSel" name="proSel">
        @for (int i = 0; i < pro.Count; i++)
        {
            <option value="@pro[i].ProvinceID">@pro[i].ProvinceName</option>
        }
    </select><select id="citySel" name="citySel">
        <option value="1">北京市</option>
    </select><select id="disSel" name="disSel">
        @for (int i = 0; i < dis.Count; i++)
        {
            <option value="@dis[i].DistrictID">@dis[i].DistrictName</option>
        }
    </select>
    看这块简单些