Javascript 所选JS下拉列表未更新

我有三个下拉列表：区域、位置和人员。您可以选择过滤位置的区域，然后选择过滤来自该区域的人员的位置。如果您首先选择一个人，那么它将选择他们所在的地区和位置。如果随后单击以查看人员下拉列表，则只能看到该位置的人员。当我添加selected.js以使人员下拉列表可搜索时，出现了这个问题。当我添加它时，人员下拉列表不再过滤

区域DDL：

                <div class="col-md-3">
                @Html.Label("Region", new {@class="control-label", @for="region"})
                <select name="region" id="region" class="form-control input-md">
                    <option value=""></option>
                    @foreach (var elem in Model.Regions)
                    {
                        if (Model.Person != null){
                            if (Model.Person.region.Equals(elem.Name))
                            {
                                <option value="@elem.Name" selected="selected">@elem.Name</option>
                            } else {
                                <option value="@elem.Name">@elem.Name</option>
                            }
                        } else {
                            <option value="@elem.Name">@elem.Name</option>
                        }

                    }
                </select>
            </div>

位置DDL:

                <div class="col-md-3">
                @Html.Label("Location", new {@class="control-label", @for="location"})
                <select name="location" id="location" class="form-control input-md">
                    <option value=""></option>
                    @foreach (var elem in Model.Locations)
                    {
                        if (Model.Person != null){
                            if (Model.Person.location.Equals(elem.Name))
                            {
                                <option data-regionid="@elem.Region" value="@elem.Name" selected="selected" >@elem.Name</option>
                            } else {
                                <option data-regionid="@elem.Region" value="@elem.Name">@elem.Name</option>
                            }
                        } else {
                                <option data-regionid="@elem.Region" value="@elem.Name">@elem.Name</option>
                        }
                    }
                </select>
            </div>

个人DDL：

                <div class="col-md-3">
                @Html.Label("Person", new {@class="control-label", @for="person"})
                <select name="person" id="person" class="form-control input-md chosen-select">
                    <option value=""></option>
                    @foreach (var elem in Model.Person)
                    {
                        if (Model.PersonId.Equals(elem.id)){
                            <option data-regionid="@elem.region" data-locationid="@elem.location" value="@elem.id" selected="selected">@elem.name (@elem.location)</option>
                        }
                    }
                </select>
            </div>

下面是筛选下拉列表的javascript：

    locations = $("#location > option").clone();
persons = $("#person > option").clone();


$("#region").change(function () {
    if ($("#region").val().length != 0) {
        filterDropDown("#location", locations, "regionid", $("#region").val());
        filterDropDown("#person", persons, "regionid", $("#region").val());
    } else {
        $("#location").html(locations.clone());
        $("#person").html(persons.clone());

        $("#location").val("");
        $("#person").val("");
    }
});

function resetDropVals(list) {
    $(list).each(function (index, item) {
        $(item).removeAttr("selected");
    });
}

$("#location").change(function () {
    if ($("#location").val().length > 0) {
        if ($("#region").val().length == 0) {
            var selectedLocation = $("#location").val();

            filterParent("#region", "#location", "regionid");
            filterDropDown("#location", locations, "regionid", $("#region").val());

            $("#location").val(selectedLocation);
        }
        filterDropDown("#person", persons, "locationid", $("#location").val());
    } else {
        if ($("#region").val().length > 0) {
            filterDropDown("#person", persons, "regionid", $("#region").val());
        } else {
            $("#person").html(persons.clone());
            $("#person").val("");
        }
    }

});

function filterParent(parentdd, childdd, dataName) {
    if ($(parentdd).val().length == 0) {
        $(parentdd + " option").each(function (index, item) {
            if ($(item).val() == $(childdd + " option:selected").data(dataName)) {
                $(parentdd).val($(item).val());
            }
        });
    }
}

$("#person").change(function () {
    if ($("#person").val().length > 0) {
        var selectedPerson = $("#person").val();

        filterParent("#location", "#person", "locationid");
        filterDropDown("#person", persons, "locationid", $("#location").val());

        var selectedLocation = $("#location").val();

        filterParent("#region", "#location", "regionid");
        filterDropDown("#location", locations, "regionid", $("#region").val());

        $("#person").val(selectedPerson);
        $("#location").val(selectedLocation);
    }
});


function filterDropDown(ddName, optionList, dataName, groupVal) {
    $(ddName).html("");
    $(ddName).append("<option></option");
    $(optionList).each(function (index, item) {
        if ($(item).data(dataName) == groupVal) {
            $(ddName).append($(item).clone());
        }
    });
}

});

---

你知道为什么在选择其他列表中的值时，会停止下拉列表的过滤吗？我只是不明白它怎么会干扰。谢谢

使用Selected时，需要在调用筛选器事件后手动更新下拉列表：

$(".chosen-select").trigger("chosen:updated");