mvc用ViewData实现下拉列表的级联

1、准备数据的action 

public ActionResult Index()

        {

           var Drplist = OperateContext.Current.BLLSession.IProductsSortBLL.GetListBy(s => s.ProductsSortID > 0).Select(t => new Model.ViewModel.ProductsSort()

            {

                ProductsSortID = t.ProductsSortID,

                ProductsSortName = t.ProductsSortName,

                nodes = t.GoodsSorts.Select(s => new Model.ViewModel.GoodSort()

                {

                    GoodsSortID = s.GoodsSortId,

                    GoodsSortName = s.GoodsSortName

                }

                    ).ToList()

             

            }).ToList();

           ViewData["Drplist"] =Common.DataHelper.ToJSON(Drplist);

            return View();

        }

2、cshtml页面

   <select name="ProductsSort" id="ProductsSort">

                             <option value="产品一级分类" selected="selected">产品一级分类</option>

                        </select>

                        <select name="GoodSort" id="GoodSort">

                             <option value="产品二级分类" selected="selected">产品二级分类</option>

                        </select> 

3、js

  var a = '@ViewData["Drplist"]';

   j = escape2Html(a);

   var obj = $.parseJSON(j);

   function escape2Html(str) {

       var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };

        return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; });

    }

    $(document).ready(init);

    function init() {

           $.each(obj, function (index, val) {

            $("<option value='" + val.ProductsSortID + "'>" + val.ProductsSortName + "</option>").appendTo($("#ProductsSort"))//动态添加Option子项

       });

      

        $("select[name='ProductsSort']").change(function () {

            var selectedPortsSort = $(this).val();

            console.log(selectedPortsSort);

            $("#GoodSort").empty();//清空二级下拉框

            ShowCityWithSelectedGoodSort(selectedPortsSort);

        });

    }

    function ShowCityWithSelectedGoodSort(selectedPortsSort) {

       $.each(obj, function (index, val) {

           if (val.ProductsSortID == selectedPortsSort)

            {

               $.each(val.nodes, function (i, v)

                {

 $("<option value='" + v.GoodsSortID + "'>" + v.GoodsSortName + "</option>").appendTo($("#GoodSort"))

                })

           }

                  });

           }