Cascade Dropdown not trigger

I am using asp.net core. I have the following controller:<br>

public async Task<IActionResult> Edit(string id, string nomor)
{
if (id == null || nomor == null || _context.Mfbnkcoms == null)
{
return NotFound();
}
//var model = await _context.Mfbnkcoms.FindAsync(id);
var model = await _context.Mfbnkcoms.Where(x => x.MfbnkcomBankId == id && x.MfbnkcomNoRekening == nomor).SingleOrDefaultAsync();
if (model == null)
{
return NotFound();
}
var glaccountselect =
_context.Mfcoas
.Select(s => new
{
AccId = s.MfcoaAccount,
AccDescription = $"{s.MfcoaAccount} -- £{s.MfcoaDes}"
})
.ToList();
return View(model);
}
public IActionResult GetSubAccount(string sid)
{
//var SubAccountList = _context.Mfsoas.Where(s => s.MfsoaAcc == sid).Select(c => new { Id = c.MfsoaAccount, Name = c.MfsoaAccount }).ToList();
var SubAccountList = _context.Mfsoas.Where(s => s.MfsoaAcc == sid).Select(c => new { Id = c.MfsoaAccount, Name = string.Format("{0}-- £{1}", c.MfsoaAccount, c.MfsoaDes) }).ToList();
return Json(SubAccountList);
}

On the View:<br>

<div class="form-group row">
<label for="GLAccount" class="col-md-2 col-form-label">GL Account</label>
<div class="col-md-6">
<select asp-for="MfbnkcomAccount" asp-items="ViewBag.Glaccount" class="form-control select2" name="GLAccount" id="GLAccount" data-live-search="true" data-size="11">
<option value="">-- Select Account --</option>
</select>
</div>
<label for="SubAccount" class="col-md-2 col-form-label">Sub Account</label>
<div class="col-md-6">
<select asp-for="MfbnkcomSubAcc" class="form-control select2" name="SubAccount" id="SubAccount" data-live-search="true" data-size="11">
<option value="">-- Select SubAccount --</option>
</select>
</div>

</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css" integrity="sha512-CbQfNVBSMAYmnzP3IC+mZZmYMP2HUnVkV4+PwuhpiMUmITtSpS7Prr3fNncV1RBOnWxzz4pYQ5EAGG4ck46Oig==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$('.select2').select2({
theme: "bootstrap"
});
</script>
<script>
$(function () {
$("select#GLAccount").change(function () {
var sid = $(this).val();
$("select#SubAccount").empty();
$.getJSON(`/BankCompanies/GetSubAccount?sid=${sid}`, function (data) {
//console.log(data);
$.each(data, function (i, item) {
$("select#SubAccount").append(`<option value="${item.id}">${item.name}</option>`);
});
});
})
});
</script>

I have an Index page which is the list of the data. When I click Edit button on the table. It will redirect to Edit page. The edit page will show with the detail of the selected data.<br>

All data appears, only data on SubAccount select is not shown. How this is happen? <br>
Advice please.

Thank you.

I test your code and set breakpoint at GetSubAccount ,but it won't excute the GetSubAccount method. Try to change your code :

$(function () {
$("select#GLAccount").change(function () {
var sid = $(this).val();
$("select#SubAccount").empty();
$.getJSON(`/BankCompanies/GetSubAccount?sid=${sid}`, function (data) {
//console.log(data);
$.each(data, function (i, item) {
$("select#SubAccount").append(`<option value="${item.id}">${item.name}</option>`);
});
});
})
});

into( remove $(function () {):

$("select#GLAccount").on("change", function () { 
// or 
//$("select#GLAccount").change(function () {
var sid = $(this).val();
$("select#SubAccount").empty();
$.getJSON(`/BankCompanies/GetSubAccount?sid=${sid}`, function (data) {
//console.log(data);
$.each(data, function (i, item) {
$("select#SubAccount").append(`<option value="${item.id}">${item.name}</option>`);
});
});
});

result:

Update

Add below in your edit action:

 ViewBag.SubAccountList = _context.Mfsoas
.Select(s => new SelectListItem() { Text =  $"{s.MfcoaAccount} -- £{s.MfcoaDes}", Value = s.MfcoaAccount.ToString()  })
.ToList();

And add asp-items="ViewBag.SubAccountList" :

<label for="SubAccount" class="col-md-2 col-form-label">Sub Account</label>
<div class="col-md-6">
<select asp-for="MfbnkcomSubAcc" asp-items="ViewBag.SubAccountList" class="form-control select2" name="SubAccount" id="SubAccount" data-live-search="true" data-size="11">
<option value="">-- Select SubAccount --</option>
</select>
</div>