Get selected items from ListBox (populated with Ajax)

Question

I am trying to get the selected item / items from my multiselect list. All I really care to retrieve is one of the selected items or the selected group, but all of the items in the group would suffice. My list starts off as empty and then is populated after a selection of a different list using Ajax.

My JQuery change event is like so:

$("#institutions").change(function() {
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("FillGroupsAndFam")',
                    dataType: 'json',
                    data: { institutionId: Number($("#institutions").val()) },
                    success: function(model) {
                        $("#family-select").empty();
                        var $prevGroup, prevGroupName;
                        $.each(model.FamilyGroups, function() {                              
                            if (prevGroupName != this.Group.Name) {
                                $prevGroup = $(document.createElement("optgroup"))
                                .prop("label", this.Group.Name)
                                .appendTo("#family-select");
                            }
                                $(document.createElement("option"))
                                    .val(this.Value)
                                    .text(this.Text)
                                    .appendTo("#family-select");
                            prevGroupName = this.Group.Name;
                        });
                        $("#family-select").multiselect('rebuild');

This calls FillGroupsAndFam which populates my list like so:

     var famList = (from f in fam
        let famGroup = new SelectListGroup {Name = f.FamilyGroupName}
        from id in f.UserIds
        select new SelectListItem
        {
            Text = UserManager.FindById(id).UserName, Value = id, Disabled = true, Group = famGroup
        }).ToList();

In my view I am displaying this list like this:

    @Html.LabelFor(m => m.CreateModel.FamilyGroups)
    @Html.ListBoxFor(m => m.CreateModel.SelectedFamilyGroupId, Model.CreateModel.FamilyGroups, new {@class="form-control", @id="family-select"})

And my ViewModel has this:

[Display(Name="Family in Study")]
public IEnumerable<SelectListItem> FamilyGroups { get; set; }
public IEnumerable<SelectListItem> SelectedFamilyGroupId { get; set; }

Answer 1

我通过将SelectedFamilyGroupId类型更改为IEnumerable<string>来解决此问题