select is not showing Options

I do not know much about this, they hired me for a big and advanced project, and I do not even know what's happening.

I have a <select> that I create via a template on asp.net mvc:

<div class="col-lg-12">
<select multiple="multiple" class="form-control m-select2" style="width: 100%"
        data-bind="attr:{id:QuestionID()}, select2: { data:ArrayOptions(), maximumSelectionLength: 2, placeholder: 'Selecciona...'  }, selectedOptions: Answers">
    <option></option>
</select>

The object is a question model, however when I open the <select> the options are not shown, however in the html if they come out.

    <select multiple="" class="form-control m-select2 select2-hidden-accessible" style="width: 100%" data-bind="attr:{id:QuestionID()}, select2: { data:ArrayOptions(), maximumSelectionLength: 2, placeholder: 'Selecciona...'  }, selectedOptions: Answers" id="8a111d0c-53d7-453a-bb0e-982a4d4b9cab" data-select2-id="8a111d0c-53d7-453a-bb0e-982a4d4b9cab" tabindex="-1" aria-hidden="true">
        <option data-select2-id="1"></option>
    <option value="82ea5947-d397-420b-9453-067a5dae6bf0" data-select2-id="2">opcion1</option>
<option value="17974c39-b9ef-45f6-b15e-8a03e9736358" data-select2-id="3">opcion2</option>...

And other options, when I click on the select, a span is created at the end of the document, which should contain the options, however it does not show them, I have no idea what that span is or what it creates, if someone can help me be great.

Edit 1: Binding the knockout that modifies the behavior of the select

ko.bindingHandlers.select2 = {
    init: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
            $(el).select2('destroy');
        });

        var allBindings = allBindingsAccessor(),
            select2 = ko.utils.unwrapObservable(allBindings.select2);

        var mySelect2 = $(el).select2(select2);

        mySelect2.val(null);
        if ("eventChange" in allBindings) {
            mySelect2.on("change", allBindings.eventChange);
        }// else {
        //    $(el).select2(select2);
        //}
    },
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();

        if ("value" in allBindings) {
            if ((allBindings.select2.multiple || el.multiple) && allBindings.value().constructor != Array) {
                $(el).val(allBindings.value().split(',')).trigger('change');
            }
            else {
                $(el).val(allBindings.value()).trigger('change');
            }
        } else if ("selectedOptions" in allBindings) {
            var converted = [];
            var textAccessor = function (value) { return value; };
            if ("optionsText" in allBindings) {
                textAccessor = function (value) {
                    var valueAccessor = function (item) { return item; }
                    if ("optionsValue" in allBindings) {
                        valueAccessor = function (item) { return item[allBindings.optionsValue]; }
                    }
                    var items = $.grep(allBindings.options(), function (e) { return valueAccessor(e) == value });
                    if (items.length == 0 || items.length > 1) {
                        return "UNKNOWN";
                    }
                    return items[0][allBindings.optionsText];
                }
            }
        }
        data = allBindings.select2.data;

        $(el).select2()

        dif = $(el).find("option").length - data.length
        if (dif!=0 && dif!=1) {
            select2 = ko.utils.unwrapObservable(allBindings.select2);
            if (data.length != 0) {
                $(el).select2('destroy');
                var mySelect2 = $(el).select2(select2);

                mySelect2.val(null);
            } else {
                $(el).select2().empty();
            }
        }
        $(el).trigger("change");
    }
};