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"))

                })

           }

                  });

           }

转载于:https://www.cnblogs.com/cqstars/p/7294410.html