You can add drop-down menus to almost any Bootstrap component using the dropdown plugin. A cascading dropdown is a dropdown that updates its data based on a value selected in another dropdown. To add cascading dropdowns, perform the following steps:
We'll add drop-down menus to two buttons which will list the region and territory data that was retrieved from a database. When the user selects a region, the Territory drop-down list will update to show only those territories associated with the selected region. The following screenshot illustrates the end result:
The two drop-down menus will be used in our Edit Customer view, and in order for the list of territories and regions to be accessible in our view, we'll first add them to the
ViewBag
object using the following code:public ActionResult Edit(int id) { var model = _context.Customers.First(c => c.CustomerId == id); ViewBag.RegionId = new SelectList(_context.Regions, "RegionId", "RegionDescription", model.RegionId...