MVC里面两个dropdownlist联动

关注

原创最新推荐文章于 2026-09-26 15:48:11 发布 3.9k 阅读 AI 写同款· GEO 优化 ›

ASP.NET DropDownList 一步一步教你实现联动的下拉列表ASP 添加web窗体DropDownLIst.aspx 工具箱添加三个DropDownList 添加三个文字 <form id="form1" runat="server"> <div> <asp:DropDownList ID="ddlYear" runat="server"></asp:DropDownList>年 <asp:DropDownList ID="ddlMonth" runa 阅读详情

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>
            }