I have a cascaded dropdown list using json to populate second dropdown and also using slectpicker to search for data in the second dropdown list. The problem I have is that the second dd is not resetting on change
I use asp.net core and Razor pages
View
<div class="row no-gutters mb-2">
<div class="col-sm-4">
<select id="Sursa" class="form-control border-danger" style="font-size:14px; height:50px">
<option value="0">Selecteaza sursa de pericol</option>
<option value="1">Executant</option>
<option value="2">Sarcina de munca</option>
<option value="3">Mijloace de productie</option>
</select>
<span asp-validation-for="EvarisMain.Sursa" class="text-danger"></span>
<input hidden asp-for="EvarisMain.Sursa" id="txtSursa" />
</div>
<div class="col-sm-4">
<select id="Categorie" class="form-control border-danger" style="font-size:14px; height:50px" asp-items="@(new SelectList(string.Empty, "FRID", "Categorie"))">
<option value="">Selecteaza pericolul</option>
</select>
<span asp-validation-for="EvarisMain.Pericol" class="text-danger"></span>
<input hidden asp-for="EvarisMain.Pericol" id="txtCategorie" />
</div>
<div class="col-sm-4">
<select id="FormaM" class="form-control bg-white border-danger h-100" style="font-size:14px; height:50px" asp-items="@(new SelectList(string.Empty, "EMID", "FormaManifestare"))">
<option value="0">--Selecteaza Forma de manifestare--</option>
</select>
<input hidden asp-for="EvarisMain.FormaManifestare" id="txtFormaM" />
</div>
</div>
json
public async Task<JsonResult> OnGetCategorieAsync(string id)
{
var categorie = await _context.FactoriRiscs.Where(s => s.Sursa == id).Select(s => s.Categorie).Distinct().ToListAsync();
return new JsonResult(new SelectList(categorie, "Categorie"));
}
public async Task<JsonResult> OnGetFormaManAsync(string id)
{
var forma = await _context.EvarisMains.Where(s => s.Pericol == id).Select(s => s.FormaManifestare).Distinct().ToListAsync();
return new JsonResult(new SelectList(forma, "FormaManifestare"));
}
jquery
$(function () {
$("#Sursa").on("change", function () {
var categoryId = $("#Sursa :selected").text();
$("#Categorie").empty();
$("#Categorie").append("<option value=''>--Selecteaza o categorie--</option>");
$.getJSON(`?handler=Categorie&id=${categoryId}`, (data) => {
$.each(data, function (i, item) {
$("#Categorie").append(`<option value="${item.value}">${item.text}</option>`);
});
});
var data = $("#Sursa :selected").text();
$("#txtSursa").val(data);
});
});
$(function () {
$("#Categorie").on("change", function () {
var categoryId = $("#Categorie :selected").text();
$("#FormaM").empty();
$("#FormaM").append("<option value=''>--Selecteaza forma de manifestare sau adauga--</option>");
$.getJSON(`?handler=FormaMan&id=${categoryId}`, (data) => {
$.each(data, function (i, item) {
$("#FormaM").append(`<option value="${item.value}">${item.text}</option>`);
});
$('#FormaM').selectpicker({ liveSearch: true });
});
var data = $("#Categorie :selected").text();
$("#txtCategorie").val(data);
});
});