Tukukkk

I'm using Unify template which has jquery chosen library for select boxes. My html code is as follows:

<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>

And my JS is as follows:

<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>

The problem is with the initialisation of those select boxes. They can be initialised only once if I get it right.

With my code I get:

Thus only the first one is initialised with $.HSCore.components.HSSelect.init('.select-evaluation-makes'); in loadMakesOnPageLoad function. But that is not what I want. All three need to be initialised.

If I change brands select box, then the models select box is also initialised. But If I change the brands select box again, then the model select box doesn't work and it isn't updated. It's probably because it hits $.HSCore.components.HSSelect.init('.select-evaluation-models'); again in ajax success call of loadModels function.

If I initialise them with common class as follows: $.HSCore.components.HSSelect.init('.js-evaluation-custom-select'); they are initialised:

But then onChange event on brands select box doesn't work. If the brands select box is changed then the models select box isn't updated, probably the same reason as above. It tries to initialise it again, this time with $.HSCore.components.HSSelect.init('.select-evaluation-models');

Any idea what is going on and how can I solve it? It drives me crazy.

After you updated the select with ajax response put on the next line:

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

You must trigger "chosen:updated" event as per chosen docs show