Hello and thanks in advance for any help, for I am stuck. I have 5 multi-select dropdowns. Values selected in the first one drive what is populated in the second. Values selected in the first and second dropdown drive the values of the third. So on and so forth all down the line - the last dropdown populated based on all of the selections of the previous 4. My project is a MVC 5 web project - front end is javascript with raw JQuery. I have defined change events in Javascript for all the dropdowns. Here is the change event for the second dropdown:
$(function () {
$(’#ddlLOBs’).change(function () {
var paraArea = $("#ddlFunctionalAreas").select2(“data”);
var paraArrayArea = paraArea.map(x => x.id);
var LOBds = $("#ddlLOBs").select2(“data”);
var LOBarray = LOBds.map(x => x.id);
console.log("LOB ids ", LOBds);
$.getJSON("UserPreference/LoadSegmentGroups", { functionalAreaIds: paraArrayArea.toString(), lobIds: LOBarray.toString() }, function (d) {
var row = "";
$.each(d, function (i, v) {
row += "<option value=" + v.value + ">" + v.text + "</option>";
})
$('#ddlSegmentGroups').html(row);
})
})
})
As we can see, I call a web method from my controller to get the data to populate the third dropdown. The data is fetched, and the dropdown values are created for the third dropdown. Here is the web method:
public async Task LoadSegmentGroups(string[] functionalAreaIds, string[] lobIds)
{
string arrString = functionalAreaIds[0];
string arrLobString = lobIds[0];
if (!String.IsNullOrWhiteSpace(arrString) && !String.IsNullOrWhiteSpace(arrLobString))
{
var IdArray = arrString.Split(",");
var LobIdArray = arrLobString.Split(",");
pref = new WorklistUserPreference(db);
await pref.LoadAllMUsList();
await pref.LoadSegmentGroups();
string[] ids = pref.AllManagementUnits.Where(o => IdArray.Contains(o.functionalAreaID.ToString()))
.Where(o => LobIdArray.Contains(o.LobId.ToString()))
.Select(o => o.segmentGroupID.ToString()).Distinct().ToArray();
var list = pref.SegmentGroups.Where(o => ids.Contains(o.Id.ToString())).Select(x =>
new SelectListItem()
{
Text = x.Value,
Value = x.Id.ToString()
});
return Json(list);
}
else
return Json(null);
}
The parameter string[] lobIds represents the second dropdown ids currently selected. So when the user selects the first choice from the dropdown, the array has one id, Second time, it has two, etc…And all of this works quite nicely.
Then, my manager added a requirement. After they have made all of their choices, they click a button to generate a data table. The new requirement is as follows: all the choices selected must be saved to the db so when they come back to the page at a later date, their previous choices are loaded. And this is where my dilema begins. I built all the back end code needed and then added some Javascipt that executes when the page initially loads:
The code fetches the user’s saved choices and the following line sets those choices as selected:
$(’#ddlLOBs’).val(lobs).change();
(lobs is an array)
And this works nicely as well as I see this when the page loads:
All the previously selected choices are set correctly and each dropdown is populated correctly based on these choices. Fabulous. BUT…If the user selects a third choice from the second dropdown, something unexpected happens: The string[] lobIds parameter in the web method receives only the id the user just added - it does not include the other two that were previously set. In other words, this line of Javascript:
$("#ddlLOBs").select2(“data”);
only returns the id just selected and not the other two.
Again, this only happens when I have the logic to initially set multiple values on the dropdown If I remove this logic, it behaves as expected. If there are two choices selected, and a third one is chosen, all three ids come into the web method. Its as if the initialization code makes the dropdown appear the way I want it but doesn’t really set the values. Help 
Thanks