两级联动菜单-详细内容 - 黄兵的个人博客

文章内容

2017/5/14 16:19:07,作者: 黄兵

两级联动菜单

最近在写一个两级联动菜单，点击第一个菜单之后，动态填充第二个select菜单。

首先看一下前段代码：

//两级联动下拉菜单，第一个选择的值
var data = $('#FirstProId option:selected').val();

$.ajax({
    type: "POST",
    url: "/Manage/SecondProjectItem",  //提交的地址
    data: { selectValue: data },   //提交的数据
    dataType: "json",
    success: function (data) {
        $('select[name=SecondProject]').empty();
        var html = '';
        $.each(data, function (Index, SecondName) {
            html += '<option value=' + SecondName['Id'] + '>' + SecondName['SecondName'] + '</option>'
        });
        $('select[name=SecondProject]').html(html);
    }
})//ajax

这个使用Select ajax提交，动态填充。

之后看一下后端代码，如下：

[HttpPost]
public ActionResult SecondProjectItem(int selectValue)
{
    using (UnitOfWork uow = new UnitOfWork())
    {
        var Second = uow.SecondProjectRepository.GetAll(x => x.FirstProId == selectValue);
        IEnumerable<BlogAddArticleViewModel> secondName_Id = Second.Select(x => new BlogAddArticleViewModel
        {
            Id = x.Id,
            SecondName = x.SecondProName
        }).ToList();

        return Json(secondName_Id);
    }
}