assign Select basierend auf einem anderen

Question

Meine Ansicht Modell wie folgt aussieht:

public IList<TeamCategory> TeamCategories { get; set; } 
public IEnumerable<SelectListItem> TeamCategoriesList { get; set; } 
public IList<CategoryInput> CategoryInputs { get; set; } 

public class CategoryInput 
{ 
    public string CategoryName { get; set; } 
    public IEnumerable<SelectListItem> VenueList { get; set; } 
} 

Abfrage:

foreach (var teamCategory in model.TeamCategories) 
      { 
       var categoryInput = new CategoryInput() 
       { 
        CategoryName = teamCategory.Name, 
        VenueList = teamCategory.Venues.Select(x => new SelectListItem() 
        { 
         Value = x.Id, 
         Text = x.Address 
        }), 
       }; 

       model.CategoryInputs.Add(categoryInput); 
      } 

Ausblick:

@Html.DropDownList("TeamCategory", Model.TeamCategoriesList, new {@id = "categorieslist"}) 

@Html.DropDownList("Venue", new List<SelectListItem>(), new {@id = "venuelist" }) 

So beginnt es mit teamcategories Liste wird bevölkert aus, und eine leere Veranstaltungsliste. Wenn ich die Kategorie ändere, möchte ich, dass die Veranstaltungsliste auf die mit dieser Kategorie verknüpfte Liste aktualisiert wird y wie aus der Abfrage ersichtlich ist.

$('#categorieslist').change(function() { 
      AssignVenues(); 
     }); 

function AssignVenues() { 
       var category = $('#categorieslist').val(); 

      } 

Answer 1

Sie müssen hören die change Ereignis auf dem TeamCategory select-Element, erhalten die gewählte Option Wert und machen:

ich den Ereignis-Listener, aber nach, dass ich bei einem Verlust begonnen haben einen Ajax-Anruf zu Ihrem Server, wo Sie die ausgewählte Team-Kategorie-ID erhalten, Orte für diese Kategorie-ID erhalten und das Ergebnis im JSON-Format zurückgeben.

@section Scripts 
{ 
<script> 
    $(function(){ 

    $("#categorieslist").change(function(){ 

     var teamCategoryId=$(this).val(); 
     $("#venuelist").html(""); 
     var venues=""; 

     $.getJSON('@Url.Action("GetVenues","Home")/'+teamCategoryId,function(data){ 
      $.each(data,function(a,b){ 
       venues+="<option value='"+b.Value+"'>"+b.Text+"</option>"; 
      }); 
      $("#venuelist").html(venues); 
     }); 

    }); 

    }); 
</script> 
} 

Vorausgesetzt Sie haben eine GetVenues Methode in Ihrem HomeController haben die

public ActionResult GetVenues(int id) 
{ 
    var list=new List<SelectListItem>(); 
    // I am hard coding 2 venues. 
    // You may replace it with your real data for the id passed in. 

    list.Add(new SelectListItem { Value="1", Text="Ann Arbor"}); 
    list.Add(new SelectListItem { Value="2", Text="Detroit"}); 

    return Json(list,JsonRequestBehaviour.AllowGet); 
}