DropDownList not binded with selected value in DataTable Edit in ASP.Net Core MVC

I am using ASP.Net Core MVC.

Issue: The selected/saved value that I am getting inside ViewModel property (scenarioId) in [HttpGet] Update method, is not visible in Scenario dropdown in EDIT view.

Scenario dropdown is still showing "--please select--" (in Edit view) even after ViewModel property is bind with DB value in [HttpGet] Update method.

I can only see scenario dropdown items upon re-selecting study dropdown items.

Also, the model I am passing in [HttpPost] method has "scenarioId" null in it. why?

Note: whatever model I am returning in [HttpGet] method, I am passing that model inside [HttpPost] so by right, model shall have all the properties available in [HttpPost] method; which is not happening in my case. Please let me know if my understanding is incorrect.

Controller code:

    public JsonResult BindScenarioDDLByStudyId(string selectedStudyId)
    {
	var scenarioList = (from x in _repository.GetScenarioDDL()
						where x.StudyId == selectedStudyId
						select new
						 {
							 ScenarioId = x.ScenarioId,
							 ScenarioName = x.ScenarioDisplayId + " | " + x.ScenarioName
						 }).ToList();
	  
	return Json(scenarioList);
    }

    [HttpGet]
    public IActionResult Update(int id)
    {
	MappingWellViewModel mappingWellViewModel = new MappingWellViewModel();
	mappingWellViewModel.StudyList = BindStudyDDL();
	mappingWellViewModel.Id = id;

	if (id != 0)
	{
		//update     
		var data = (//some LINQ join query).FirstOrDefault();

		mappingWellViewModel.StudyId = data.StudyId;
		mappingWellViewModel.scenarioId = data.ScenarioId;
	}
	return View(mappingWellViewModel); //--this model is bind with selected StudyId and selected scenarioId from database
    }

    [HttpPost]
    public IActionResult Update(MappingWellViewModel mappingWellViewModel) //--here I only get value of selected StudyId and NOT selected scenarioId, even thou the model in [HttpGet] method has scenarioId
    {
	//update code
    }

ViewModel class:

namespace WebApp.ViewModel
{
    public class MappingStudyViewModel
    {
        public string StudyId { get; set; }
        public List<HdrFdpStudy> StudyList { get; set; }
  
        public string scenarioId { get; set; }
        public List<HdrFdpScenarios> ScenarioList { get; set; }
    }
}

View.cshtml:

<select class="form-control col-md-8" onchange="GetScenario(this.value);"
        asp-for="StudyId"
        asp-items="@(new SelectList(@Model.StudyList, "StudyId", "StudyName"))">
    <option value="">--Please Select--</option>
</select>
  
<select id="ddlScenario" class="form-control col-md-8" name="ddlScenario"
        asp-for="scenarioId">
    <option value="">--Please Select--</option>
</select>

 
function GetScenario(_studyId) {
    var url = "/MappingStudy/BindScenarioDDLByStudyId/";  
    $.ajax({
        url: url,
        data: { selectedStudyId: _studyId },
        cache: false,
        type: "POST",
        success: function (data) {
               
            var markup = "<option value=''>--Please Select--</option>";
            for (var x = 0; x < data.length; x++) {
                markup += "<option value=" + data[x].scenarioId + ">" + data[x].scenarioName + "</option>";
            }
   
            $("#ddlScenario").html(markup);      
        },
        failure: function (response) {
            alert("fail : " + response.responseText);
        },
        error: function (response) {
            alert("error : " + response.responseText);
        }
    });
}

Please let me know what am I missing here?

Thank you so much in advance.