Hierarchical Tree Menu with Select Box (instantsearch)

selectHierarchicalMenu.js

var customMenuRenderFn = function (renderParams, isFirstRendering) {
    var container  = renderParams.widgetParams.container;
    var title      = renderParams.widgetParams.title;
    var templates  = renderParams.widgetParams.templates;
    var cssClasses = renderParams.widgetParams.cssClasses || "";
    var attributes = renderParams.widgetParams.attributes.map(function (attribute) {
        return attribute.replace('.', '___');
    });

    var currentSelectedValue = null;

    function attachChangeEvent(element, refine)
    {
        $(container).find(element).on('change', function (event) {
            var value = event.target.value;

            if (value === '__EMPTY__') {
                value = currentSelectedValue;
            }

            refine(value);

            currentSelectedValue = value;
        });
    }

    if (isFirstRendering)
    {
        $(container).append(
            '<div class="ais-header">' + templates.header + '</div>' +
            '<select id="ais-hierarchic-root--attribute-' + attributes[0] +'" class="' + cssClasses.select + '">' +
                '<option value="__EMPTY__" class="' + cssClasses.item + '">Tutto</option>' +
            '</select>' +
            '<div class="ais-hierarchic-levels"></div>'
        );

        attachChangeEvent('#ais-hierarchic-root--attribute-' + attributes[0], renderParams.refine);
    }
    else
    {
        $(container).find('.ais-hierarchic-levels').empty();

        updateHits(0, renderParams.items);
    }

    function generateOptionsHtml(depth, hits)
    {
        var nullValue = "__EMPTY__";

        if (depth > 0) {
            var rootSelect = $('#ais-hierarchic-root--attribute-' + attributes[0]);
            if (rootSelect.length > 0) {
                nullValue = rootSelect.val();
            }
        }

        var optionsHtml = ['<option value="' + nullValue + '" class="' + cssClasses.item + '" selected>Tutto</option>'];

        optionsHtml = optionsHtml.concat(hits.map(function (item) {
            return `<option class="${cssClasses.item}" value="${item.value}" ${item.isRefined ? 'selected' : ''}>
                        ${item.label} (${item.count})
                    </option>`;
        }));

        return optionsHtml;
    }

    function updateHits(depth, hits)
    {
        hits.forEach(function (item) {
            if (item.isRefined) {
                if (item.data) {
                    return updateHits(depth + 1, item.data);
                }
            }
        });

        var element = null;

        var hierarchicLevels = $(container).find('.ais-hierarchic-levels');

        if (depth > 0)
        {
            var element  = $(hierarchicLevels).find('#ais-hierarchic-levels--attribute-' + attributes[depth]);

            if (element.length <= 0) {
                var originalAttributeName = attributes[depth].replace('___', '.');

                $(hierarchicLevels).append(
                    '<select id="ais-hierarchic-levels--attribute-' + attributes[depth] + '" ' +
                        'class="' + cssClasses.select + '"' +
                        'data-attribute="' + originalAttributeName + '">' +
                    '</select>'
                );

                element = $(container).find('#ais-hierarchic-levels--attribute-' + attributes[depth]);

                attachChangeEvent('#ais-hierarchic-levels--attribute-' + attributes[depth], renderParams.refine);
            }
        }
        else
        {
            element = $(container).find('#ais-hierarchic-root--attribute-' + attributes[0]);
        }

        element.html(generateOptionsHtml(depth, hits));
    }
}

var selectHierarchicalMenu = instantsearch.connectors.connectHierarchicalMenu(customMenuRenderFn);

search.addWidget(
    selectHierarchicalMenu({
        limit: 50,
        container: '#container',
        attributes: ['hierarchicalCategories.lvl0', 'hierarchicalCategories.lvl1'],
        showParentLevel: false,
        templates: {
            header: 'Header'
        },
        cssClasses: {
            select: 'testing-select-class',
            item:   'testing-item-class'
        }
    })
);