MVC4 DropDownList (二)

MVC4 DropDownList (二) — 省市联动

1、添加省份和城市类

//省份
    public class Province
    {
        public int Id { get; set; }

        public string Name { get; set; }
    }

    //城市
    public class City
    {
        public int Id { get; set; }

        public string Name { get;set;}

        public int ProvinceId { get; set; }
    }

2、添加控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SupermarketManagement.Models;

namespace SupermarketManagement.Controllers
{
    public class LinkageController : Controller
    {

        List<Province> provinceList = new List<Province>();
        List<City> cityList = new List<City>();

        //初始化城市数据
        private void InitProvince()
        {
            provinceList.Add(new Province { Id = 1, Name = "河北省" });
            provinceList.Add(new Province { Id = 2, Name = "河南省" });
            provinceList.Add(new Province { Id = 3, Name = "广东省" });

            cityList.Add(new City { Id = 4, Name = "石家庄", ProvinceId = 1 });
            cityList.Add(new City { Id = 5, Name = "邢台", ProvinceId = 1 });
            cityList.Add(new City { Id = 6, Name = "保定", ProvinceId = 1 });

            cityList.Add(new City { Id = 7, Name = "郑州", ProvinceId = 2 });
            cityList.Add(new City { Id = 8, Name = "安阳", ProvinceId = 2 });
            cityList.Add(new City { Id = 9, Name = "洛阳", ProvinceId = 2 });

            cityList.Add(new City { Id = 10, Name = "广州", ProvinceId = 3 });
            cityList.Add(new City { Id = 11, Name = "中山", ProvinceId = 3 });
            cityList.Add(new City { Id = 12, Name = "佛山", ProvinceId = 3 });
        }

        //绑定省份
        public ActionResult Index()
        {
            InitProvince();
            var pEnumrable = provinceList.Select(p => new SelectListItem { Value = p.Id.ToString(), Text = p.Name });
            ViewBag.Province = pEnumrable;
            return View();
        }

        //获取城市
        public ActionResult ShowCity(int provinceId)
        {
            InitProvince();
            List<City> cList = new List<City>();
            cList = cityList.Where(c => c.ProvinceId == provinceId).ToList();

            return Json(cList, JsonRequestBehavior.AllowGet);
        }
    }


}

3、添加HTML

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Content/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $("#Province").bind("change", function () {
                var selectProvince = $(this).val();

                //除了第一个都删除
                  $("#City option:not(:first)").remove();
                $.getJSON("@Url.Action("ShowCity","Linkage")", { provinceId: selectProvince }, function (data) {

                    $.each(data, function (i, item) {
                        $("#City").append("<option value='"+item.Id+"'>"+item.Name+"</option>");
                    });
                });
            });
        });
    </script>
</head>
<body>

    省份：@Html.DropDownList("Province", "请选择省份")<br />
    城市：<select id="City">
        <option value="">请选择城市</option>
    </select><br />
</body>
</html>