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

最新推荐文章于 2023-01-16 14:59:11 发布

苦逼老程序员

最新推荐文章于 2023-01-16 14:59:11 发布

阅读量356

点赞数

本文链接：https://blog.csdn.net/pt_sm/article/details/53520544

版权

本文介绍了一种使用ASP.NET MVC和JavaScript技术动态加载并填充多级下拉列表的方法。通过后台获取产品分类数据，并利用JavaScript处理这些数据来实现下拉列表的动态更新，当用户选择一级分类时，对应的二级分类会随之改变。

摘要由CSDN通过智能技术生成

 
 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页面

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

</select>

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

})

}

});

}