Issue with Dropdown Pre-selection in ASP.NET Core MVC with Chosen.js Plugin

Problem

I’m working on an ASP.NET Core MVC application where I need to pre-select values in dropdown lists based on data from the model. I’m using the Chosen.js plugin to enhance the dropdowns. However, the dropdowns are not showing the pre-selected values when the page loads.

Code Overview

Here’s a snippet of my view code:

@for (int i = 0; i < Model.Cards_BR.Count; i++)
{
    <tr id="row-@i">
        <td data-label="Nazwa projektu">
            <select id="ProjectName-@i" name="Cards_BR[@i].ProjectId" class="form-control">
                <option value="">Wybierz projekt</option>
                @foreach (var project in Model.Projects)
                {
                    <option value="@project.Id">@project.Name</option>
                }
            </select>
        </td>
        <!-- Similar structure for other dropdowns -->
    </tr>
}

I’m using JavaScript to set the selected values:

function setSelectedValues(index, projectId, qualificationId, phaseId, categoryId) {
    const projectNameDropdown = document.getElementById(`ProjectName-${index}`);
    const qualificationDropdown = document.getElementById(`ActivityQualification-${index}`);
    const phaseDropdown = document.getElementById(`ProjectPhase-${index}`);
    const categoryDropdown = document.getElementById(`CategoryOfActivities-${index}`);

    if (projectNameDropdown) {
        projectNameDropdown.value = projectId;
    }

    if (qualificationDropdown) {
        qualificationDropdown.value = qualificationId;
    }

    if (phaseDropdown) {
        phaseDropdown.value = phaseId;
    }

    if (categoryDropdown) {
        categoryDropdown.value = categoryId;
    }

    // Initialize Chosen after setting the values
    $(`#ProjectName-${index}`).chosen();
    $(`#ActivityQualification-${index}`).chosen();
    $(`#ProjectPhase-${index}`).chosen();
    $(`#CategoryOfActivities-${index}`).chosen();
}

The setSelectedValues function is called on DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function () {
    setSelectedValues(@i, "@Model.Cards_BR[i].ProjectId", "@Model.Cards_BR[i].QualificationId", "@Model.Cards_BR[i].PhaseId", "@Model.Cards_BR[i].CategoryId");
});

Logs Observed

I added logging to the setSelectedValues function to track the values being set, and the console output shows the following:

Initializing values for row: 0
Project ID: 8, Qualification ID: 7, Phase ID: 21, Category ID: 39
Project dropdown value set to: 8
Qualification dropdown value set to: 7
Phase dropdown value set to: 21
Category dropdown value set to: 39

What I’ve Tried

1. Ensured the model data is correct and contains the expected values.

2. Verified that the setSelectedValues function is being called and that the correct values are being passed to it.

3. Initialized Chosen.js after setting the values to ensure the plugin is not overriding the selection.

4. Checked the JavaScript console for errors and confirmed that the correct values are being set in the function.

Current Behavior

Despite the values being correctly set in the JavaScript function and confirmed in the logs, the dropdowns do not display the selected values in the UI. They always show the default option (“Wybierz projekt,” “Wybierz kwalifikację,” etc.), rather than the pre-selected values from the model.

Model structure

public class ParentModel
{
    public List<Cards_BR> Cards_BR { get; set; } = new List<Cards_BR>();
    public List<Project> Projects { get; set; } = new List<Project>();
    public List<Qualification> Qualifications { get; set; } = new List<Qualification>();
    public List<Phase> Phases { get; set; } = new List<Phase>();
    public List<Category> Categories { get; set; } = new List<Category>();
}

public class Cards_BR
{
    public int ProjectId { get; set; }
    public Project Project { get; set; }

    public int QualificationId { get; set; }
    public Qualification Qualification { get; set; }

    public int PhaseId { get; set; }
    public Phase Phase { get; set; }

    public int CategoryId { get; set; }
    public Category Category { get; set; }
}

public class Project
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class Qualification
{
    public int Id { get; set; }
    public string Name { get; set; }
    public ICollection<Phase> Phases { get; set; } = new List<Phase>();
}

public class Phase
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int QualificationId { get; set; }
    public Qualification Qualification { get; set; }
    public ICollection<Category> Categories { get; set; } = new List<Category>();
}

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int PhaseId { get; set; }
    public Phase Phase { get; set; }
}

Question

What could be causing the dropdowns to not show the pre-selected values despite the logs showing that the correct values are being set? How can I ensure that the selected values are displayed correctly in the UI?