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');函数中的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');

对其进行初始化。

任何想法都在发生什么，我该如何解决？这让我发疯。

Answer 1

用下一行的ajax响应更新select后：

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

您必须根据选择的docs节目触发“选择：更新”事件

使用jquery和javascript

1 个答案: