使用jQuery和JavaScript更新CHOSEN選擇框

Question

我正在使用具有jquery chosen庫的選擇框的Unify模板。 我的html代碼如下：

<div>
    <select class="select-evaluation-makes js-evaluation-custom-select u-select-v1 g-min-width-200 g-brd-none g-bg-secondary g-color-main g-color-primary--hover g-py-12"
            required
            data-placeholder="{% trans "Select brand" %}"
            data-open-icon="fa fa-angle-down"
            data-close-icon="fa fa-angle-up">
    </select>
    <select class="select-evaluation-models js-evaluation-custom-select u-select-v1 g-min-width-200 g-brd-none g-bg-secondary g-color-main g-color-primary--hover g-py-12"
            required disabled
            data-placeholder="{% trans "Seect model" %}"
            data-open-icon="fa fa-angle-down"
            data-close-icon="fa fa-angle-up">
    </select>
    <select class="select-evaluation-years js-evaluation-custom-select u-select-v1 g-min-width-200 g-brd-none g-bg-secondary g-color-main g-color-primary--hover g-py-12"
            required disabled
            data-placeholder="{% trans "Select year" %}"
            data-open-icon="fa fa-angle-down"
            data-close-icon="fa fa-angle-up">
    </select>
</div>

而我的JS如下：

<script>
    const select_makes_selector = $(".select-evaluation-makes");
    const select_models_selector = $(".select-evaluation-models");
    const error_box = $("#error-box");
    const error_message = $("#error-message");

    $(document).ready(function () {

        loadMakesOnPageLoad();

        //Get models on make change
        select_makes_selector.on('change', function (e, params) {
            loadModels(parseInt(params["selected"]))
        });
    });

    function loadMakesOnPageLoad() {
        $.ajax({
            type: "GET",
            url: "/vehicle-evaluation/get-makes/",
            beforeSend: function () {
            },
            success: function (result) {
                let makes = result['makes'];
                select_makes_selector.append("<option></option>");
                _.forEach(makes, function (make) {
                    select_makes_selector.append("<option class=\"evaluation-make g-brd-none g-color-main g-color-white--hover g-color-white--active g-bg-primary--hover g-bg-primary--active\" value=\"" + make.id + "\">" + make.name + "</option>")
                });

                $.HSCore.components.HSSelect.init('.select-evaluation-makes');   
            },
            error: function (response) {
                error_box.removeClass("hidden");
                error_message.html('<strong>' + gettext("Oh snap!") + '</strong>' + gettext("Something went wrong. Makes couldn't be fetched"))
            }
        });
    }

    function loadModels(make_id) {
        $.ajax({
            type: "GET",
            url: "/vehicle-evaluation/get-models/" + make_id + '/',
            beforeSend: function () {

            },
            success: function (result) {
                let models = result['models'];
                select_models_selector.attr('disabled', false).trigger("chosen:updated");
                select_models_selector.append("<option></option>");
                _.forEach(models, function (model) {
                    select_models_selector.append("<option class=\"evaluation-model g-brd-none g-color-main g-color-white--hover g-color-white--active g-bg-primary--hover g-bg-primary--active\" value=\"" + model.id + "\">" + model.name + "</option>")
                });
                $.HSCore.components.HSSelect.init('.select-evaluation-models');    
            },
            error: function (response) {
                error_box.removeClass("hidden");
                error_message.html('<strong>' + gettext("Oh snap!") + '</strong>' + gettext("Something went wrong. Models couldn't be fetched"))
            }
        });
    }

</script>

問題在於這些選擇框的初始化。 如果我做對的話，它們只能初始化一次。

通過我的代碼，我得到：

因此，只有第一個使用$.HSCore.components.HSSelect.init('.select-evaluation-makes');初始化$.HSCore.components.HSSelect.init('.select-evaluation-makes'); 在loadMakesOnPageLoad函數中。 但這不是我想要的。 這三個都需要初始化。

如果更改品牌選擇框 ，則模型選擇框也會被初始化。 但是，如果我再次更改品牌選擇框 ，則模型選擇框將不起作用，並且不會更新。 這可能是因為它命中了$.HSCore.components.HSSelect.init('.select-evaluation-models'); 在ajax中成功調用loadModels函數。

如果我使用如下通用類初始化它們： $.HSCore.components.HSSelect.init('.js-evaluation-custom-select'); 它們被初始化：

但是， 品牌選擇框上的onChange事件不起作用。 如果品牌選擇框已更改，則模型選擇框不會更新，可能與上述原因相同。 它嘗試再次使用$.HSCore.components.HSSelect.init('.select-evaluation-models');進行初始化$.HSCore.components.HSSelect.init('.select-evaluation-models');

知道發生了什么，如何解決？ 它讓我瘋狂。

Answer 1

在更新帶有ajax響應的select ，放在下一行：

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

您必須根據所選文檔顯示觸發“ chosen：updated”事件