基于MVC3下拉列表联动（JQuery）

浏览数：34 / 时间：2015年06月09日

上次项目中遇到一个需要多个下拉列表联动的操作，今天有空将实现方式整理以便以后参考。

要达到的效果是，点击一个下拉框，则另一个下拉框的值发生对应变化。如：选择中国，则另个一下拉框里显示中国各个省份。

传统的HTML方式比较简单，实际上基于MVC的实现方式也大同小异。

直接上代码：

public class DP_Provice
    {
        public int proviceID { get; set; }

        public string ProviceName { get; set; }

        public int ProviceNode { get; set; }

        public virtual List<DP_City> citySource { get; set; }

    }

    public class DP_City
    {
        public int CityNode { get; set; }

        public string CityName { get; set; }

        public string ProviceNode { get; set; }

    }

对以上涉及到的实体类予以赋值，暂时使用一个静态类初始化简单数据：

public static class DPDataSource
    {
        public static List<DP_Provice> InitalData()
        {
            List<DP_Provice> source = new List<DP_Provice>
            {
                new DP_Provice{ ProviceNode=1, ProviceName="北京", citySource=new List<DP_City>{
                 new DP_City{
                  CityNode=11, CityName="北京海淀"
                 },
                 new DP_City{
                 CityNode=12,CityName="北京西城"
                 }
                }},

                new DP_Provice{ ProviceNode=2, ProviceName="山东", citySource=new List<DP_City>{
                 new DP_City{
                  CityNode=21, CityName="济南"
                 },
                 new DP_City{
                 CityNode=22,CityName="德州"
                 }
                }},

                new DP_Provice{ ProviceNode=3, ProviceName="河北", citySource=new List<DP_City>{
                 new DP_City{
                  CityNode=31, CityName="石家庄"
                 },
                 new DP_City{
                 CityNode=32,CityName="衡水"
                 }
                }}
            };

            return source;
        }

    }

具体在Controller中的调用，因为使用的JQuery中的AJAX方式，所以返回的结果类型为Json;

public ActionResult Index()
        {
            return View("DPShow");
        }

        List<DP_Provice> source = DPDataSource.InitalData();

        public JsonResult GetProvinceSource()
        {
            if (source == null || source.Count < 0)
            {
                source = DPDataSource.InitalData();
            }
            return Json(source, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetCitySource(string proviceName)
        {
            source = DPDataSource.InitalData();
            List<DP_City> citySource = new List<DP_City>();
            citySource = source.Where(a => a.ProviceNode.ToString().Contains(proviceName)).First().citySource;
            return Json(citySource, JsonRequestBehavior.AllowGet);
        }

数据准备完毕，此时需要Razor视图中进行绑定和展示，代码如下：

@model MvcApplication.Models.DP_Provice
@{
    ViewBag.Title = "DPShow";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
< script type="text/javascript">

    $(function myfunction() {
        GetPlant();

//初始化省份数据

       $("#ddlProvince").change(function ff() { //设置当省份下拉列表发生变化时，更新城市数据列表
            GetCity();
        });

    });

    function GetPlant() {
        $("#ddlProvince").empty();
        var url = "/Dropdown/GetProvinceSource/";

        $.getJSON(url, function (data) {

            $.each(data, function (i, item) {
                $("<option></option>")
                        .val(item["ProviceNode"])
                        .text(item["ProviceName"])
                        .appendTo($("#ddlProvince"));
            });
            GetCity();
        });
    }
    function GetCity() {
        $("#ddlCity").empty();
        var temp=$("#ddlProvince").val();
        var url ="@Url.Action("GetCitySource", "Dropdown")" ;

//使用MVC3中Url.Action 方法参数依次为：aciton ; controller ; area ;

$.getJSON(url,{"proviceName":temp}, function (data) {

//中间需要用到参数所以采用在getJSON方法中实现

            $.each(data, function (i, item) {
                $("<option></option>")
                    .val(item["CityNode"])
                    .text(item["CityName"])
                    .appendTo($("#ddlCity"));
            });
        });
    }

< /script>
< ! DOCTYPE html />
< h2>
    下拉列表联动</h2>
< table>
    <tr>
        <td>
            <select id="ddlProvince" />
        </td>
        <td>
            <select id="ddlCity" />
        </td>
    </tr>
< /table>