Cascaded selctpicker dropdownl ist no resetting

Question

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);

    });
});