选择的 JS 下拉列表未更新

Question

我有三个下拉列表：区域、位置和人员。您可以选择过滤位置的区域，然后选择一个位置，从那里过滤人员。如果您先选择一个人，那么它将选择他们的区域和位置。如果您随后单击查看人员下拉列表，您将只能看到该位置的人员。当我添加 Chosen.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());
        }
    });
}

});

知道为什么选择其他列表中的值时会阻止下拉列表过滤吗？我只是不明白它是如何干扰的。谢谢！

Answer 1

使用choice时，需要在调用过滤事件后手动更新下拉列表：

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