select联动（C#+.NET MVC+Jquery）

elect联动（C#+.NET MVC+Jquery）

 方法1：http://blog.sina.com.cn/s/blog_73fe8abe0100og8y.html

方法2：

 

1.实现效果

 

问题重述

实现类似于选中省份select后，城市select自动绑定该省份的城市列表。

方法陈述

前台jquery利用后台返回的json数据对象，遍历数据项对select进行叠加option标签，并绑定value和text属性。

简要代码

DAL层（BLL层）

//获取省份列表 

public List<province> GetProList(){}

//根据省份外键获取城市列表

public List<city> GetCitList(int city_prce_id){}

表现层

/// <summary>

/// 获取省份

/// </summary>

/// <returns>Json</returns>

public ActionResult GetProList()

{

    BLL.ProCitService ProCitService = new BLL.ProCitService();

    List<province> list = ProCitService.GetProList();

    return Json(list, JsonRequestBehavior.AllowGet);

}

 

/// <summary>

/// 根据省份获取城市

/// </summary>

/// <param name="id"></param>

/// <returns>Json</returns>

public ActionResult GetCitList(string id)

{

    BLL.ProCitService ProCitService=new BLL.ProCitService();

    List<city> list = ProCitService.GetCitList(int.Parse(id)); 

    return Json(list, JsonRequestBehavior.AllowGet);

}

前台

<script type="text/javascript">

    $(function () {

 

        GetProList();

 

        $('#province').change(function () {

            changeCity();

        });

    });

 

    function GetProList()

    {

        $.post("/Login/GetProList", function (data) {

            $('#province').empty();

            $('#province').append($('<option></option>').val("").text("请选择").attr("selected", true));

            $.each(data, function (i, item) {

                $('#province').append($('<option></option>').val(item.prce_id).text(item.prce_name));

            });

        });          

    }

 

    function emptyCity()

    {

        $('#city').empty();

        $('#city').append($('<option></option>').val('').text('请选择'));

    }

 

    function changeCity()

    {

        var selectedPrceId = $.trim($('#province option:selected').val());

        if (selectedPrceId.length == 0) {

            emptyCity();

        }

        else {

            $.post("/Login/GetCitList", { id: selectedPrceId }, function (data) {

                $('#city').empty();

                $.each(data, function (i, item) {

                    $('#city').append($('<option></option>').val(item.city_id).text(item.city_name));

                });

            });

        }

    }

</script>

杂项

不选用数组，而选择Json

Json可表现的内容更丰富，更方便传输与重组，常用于跨平台、跨语言的数据交互。

是一种结构化的，轻量级的全独立于语言的，基于文本数据传输格式，在很多场合下来代替XML文件格式，相比xml更小，更便于机器解析。

Json可以方便实现多维数组的功能。

数组用于在单个变量中存储多个相同类型值，方便程序操作。

Json数据定义格式[{key:value,key1:value1},{}]

数组数据定义格式[key=value,key1=value1]

 

Jquery知识

$.post(提交路径，{参数名称：参数}，function(data){});

$.each(data, function (i, item){}); //i=>数据项的下标，item=>数据项（item.username=>数据项中的username字段）