選擇的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

當使用selected時，需要在調用過濾器事件后手動更新下拉列表：

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