To ensure that the second dropdown in a webpage is populated with data based on the value selected in the first dropdown, you can use the following approach:
$(function(){
var gaCatId=$("#gaCatId").val();
if(gaCatId!="")
{
var items="";
$.getJSON("@Url.Action("GetSubCategories","Gallery")/"+gaCatId,
function(data){
$.each(data, function (index, item) {
items+="<option value='"+item.Value+"'>"+item.Text+"</option>";
});
$("#GaSCatId").html(items);
});
}
});
This method should work as expected. However, if you are editing a page instead of creating a new one, it would be more efficient to load the data for the second dropdown directly from the action method.
Let's assume you are editing a product page and have a viewmodel defined as follows:
public class ProductVM
{
public int ID { set;get;}
public string Name { set;get;}
public List<SelectListItem> Categories { set;get;}
public List<SelectListItem> SubCategories { set;get;}
public int SelectedCategoryID { set;get;}
public int SelectedSubCategoryID { set;get;}
}
In your edit GET action method, you can populate the viewmodel with the required data:
public ActionResult Edit(int id)
{
var vm = new ProductVM { ID=id};
Product product = repo.GetProductFromID(id);
vm.Name = product.Name;
vm.Categories = GetAvailableCategories();
vm.SelectedCategoryID = product.Category.ID;
vm.SubCategories = GetSubCategories(product.Category.ID);
vm.SelectedCategoryID = product.SubCategory.ID;
return View(vm);
}
Assuming that GetAvailableCategories and GetSubCategories are methods that return a list of SelectListItem.
private List<SelectListItem> GetAvailableCategories()
{
//TO DO : read from repository and build the list, then return it
}
In your strongly typed view (bound to our ProductVM class), you can implement the necessary HTML elements:
@model ProductVM
@using(Html.BeginForm())
{
@Html.HiddenFor(x=>x.ID)
@Html.EditorFor(x=>x.Name)
@Html.DropDownListFor(x=>x.SelectedCategoryID,
Model.Categories,"select")
@Html.DropDownListFor(x=>x.SelectedSubCategoryID,
Model.SubCategories,"select")
<input type="submit" />
}