MVC里面两个dropdownlist联动

来源：互联网发布：淘宝联系卖家的软件编辑：程序博客网时间：2024/05/08 06:46

MVC view里面有两个dropdownlist分别邦定到两个属性

View里面

    <div class="row">        <div class="col-md-4">            @Html.LabelFor(m => m.Name, new { @class = "form-label" })            @Html.DropDownListFor(m => m.Id, (IEnumerable<SelectListItem>)ViewData["DSPService"], "Please Select", new { @id="dropdowndsp", @class = "form-control" ,<span style="color:#ff0000;"> @onchange="filterdropdownlist()"</span>} )        </div>        <div class="col-md-4">            @Html.Label("DSP Service Detail")            @Html.DropDownListFor(m => m.Id, (IEnumerable<SelectListItem>)ViewData["DSPServiceDetail"], "Please Select", new { @id="dropdowndspdetail" ,@class = "form-control" })        </div>    </div>

这里给第一个dropdownlist添加了onchange事件

在Controller里面

 public ActionResult Home()        {            Merret.Store.Domain.Tables.DeliveryServiceProvider mobj = new Merret.Store.Domain.Tables.DeliveryServiceProvider();            mobj.Id = "DPD";            mobj.Name = "DPD Service";            SelectList  dsps =new SelectList (               new List<SelectListItem>               {                    new SelectListItem {Text="DPD" ,Value="DPD" },                    new SelectListItem {Text="META",Value="META" }               },"Value","Text");            List<DeliveryService> lstdspservice = new List<DeliveryService>                {                    new DeliveryService {Id="DPD", DSPId ="DPD",Description ="DPD1" },                    new DeliveryService {Id="2", DSPId ="DPD",Description ="DPD2" },                    new DeliveryService {Id="3", DSPId ="DPD",Description ="DPD3" },                    new DeliveryService {Id="4", DSPId ="META",Description ="Meta1" },                    new DeliveryService {Id="5", DSPId ="META",Description ="Meta2" },                    new DeliveryService {Id="6", DSPId ="META",Description ="Meta3" },                };                                      <span style="color:#ff0000;"><strong> SelectList dspsdetail = new SelectList(              lstdspservice , "Id", "Description", "DSPId", (object)mobj.Id);</strong></span>                ViewData["DSPService"] =dsps;                ViewData["DSPServiceDetail"] = dspsdetail;            return View("DisplayDSPs",mobj);            }

给Dropdownlist “dropdowndspdetail” 提供数据的selectlist里面第三个参数是datagroupfield

然后添加javascript，就是在第一个dropdownlist的onchange事件中对第二个Dropdownlist的datagroupfield进行筛选

            function filterdropdownlist()            {                var d = $("#dropdowndsp");               <strong> $("#dropdowndsp").filterSelectGroups("dropdowndspdetail");</strong>            }

1 0