select2 4.0 - TypeError: $(...).select2(...).select2(...) is undefined

Question

试图最终切换到 4.0 版本的 select2 并且运行遇到了问题。

所有这些在 3.5 上都运行良好。单击按钮时，我打开一个 bootstrap 模式并将远程页面加载到其中。我已经在普通页面（不是模态）上测试了所有内容，并且它工作正常。当如下所示加载到模态中时，模态将打开，一切都像 3.5 一样，但 select2 返回错误。我认为这里的问题是 select2 是从远程页面加载的...相同的远程加载方法始终与 3.5 一起完美运行。

TypeError: $(...).select2(...).select2(...) is undefined

js:

// show edit modal
$('#datatable2').on('click', '.dtEdit', function () {

    var data = {
      'filter_id': $(this).parents('tr').attr('id').replace('dtrow_', '')
    };

    $('#modal-ajax').load(
      '/modals/m_filtering_applications_filters.php',
      data,
      function() {
        $(this).modal('show');
        changeSettings();
        hourSelection();
      }
    );
});

// change filter modal confirmation
var changeSettings = function() {

    // get the default filter           
    var default_filter = $("#filter_default").val();

    //app list
    $("#vedit-filter").select2({
        placeholder: {
            id: default_filter, // or whatever the placeholder value is
            text: default_filter // the text to display as the placeholder
        },
        allowClear: true,
        multiple: false,
        tags: true,
        createTag: function (query) {
            return {
                id: query.term,
                text: query.term,
                tag: true
            }
        },
        ajax: {
            dataType: 'json',
            delay: 500,
            type: 'post',
            url: '/process/get_application_list.php',
            data: function (params) {
                return {
                    term: params.term, // search term
                    page: params.page, //page number
                    page_limit: 25, // page size
                };
            },
            results: function (data, page) {
                var more = (page * 25) < data.total; // whether or not there are more results available
                return {
                    results: data.results,
                    more: more
                };
            }
        }
    }).select2('val', [default_filter]).on('change', function() {
        $(this).valid();
    });

}

m_filtering_applications_filters.php :

只是模态加载的内容：

<div class="modal-dialog">
    <div class="modal-content">                             
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h3 class="modal-title">Change these settings?</h3>
        </div>
        <form id="application-filters-edit">
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">

                        <div class="row">

                            <div class="col-md-12 margin-bottom-30 form-group">
                                <div class="input-modal-group">
                                    <label for="vedit-filter" class="f-14"><b>Application to filter :</b></label>
                                    <select id="vedit-filter" name="settings[filter]" class="form-control select2">
                                        <option value="<?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?>" selected=""><?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" name="settings[users][]" value="<?php echo $result['user_id']; ?>"/>
                <input id="filter_default" type="hidden" name="settings[original]" value="<?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?>"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <?php
                    if (!$result)
                    {
                        //disable the button
                        echo '<button type="button" class="btn btn-primary disabled" data-dismiss="modal"><i class="fa fa-check-circle"></i> &nbsp;Save Settings</button>';
                    }
                    else
                    {
                        // show the button
                        echo '<button class="btn btn-primary" type="submit"><i class="fa fa-check-circle"></i> &nbsp;Save Settings</button>';
                    }
                ?>

            </div>
        </form>
    </div>
</div>

更新：

好的，错误来自：

}).select2('val', [default_filter]).on('change', function() {
    $(this).valid();
});

附在最后...这是为了使用 jquery 验证脚本（我没有在此处的 jS 中包含它），并且再次在 3.5 中运行良好。你能不能再用 4.0 或其他东西添加到 select2()？

删除此行后错误消失，但 select2 的显示宽度非常小，我无法将焦点放在搜索框上以输入任何值，因此它在模态中仍然无法使用。

更新2：

意识到 4.0 中的事件发生了变化，所以这似乎有效：

}).on("change", function (e) {
    $(this).valid();
});

但仍然无法在搜索框中输入任何内容。另外，我注意到如果我点击输入框中箭头以外的任何东西来显示下拉菜单，它就像鼠标被按住一样 - 它突出显示模态中的所有 text/content。

Answer 1

解决方案： 我在 bs3 模式中使用 select2 遇到的所有问题都通过在我的 js 中添加以下内容得到解决：

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

content/text 的突出显示消失了。搜索框上的焦点消失了。现在一切似乎都很好。我目前没有关于这条线实际做什么的任何信息，但会研究它以找出答案并将其添加回此处以供将来参考。

select2 4.0 - TypeError: $(...).select2(...).select2(...) is undefined

select2 4.0 - TypeError: $(...).select2(...).select2(...) is undefined

jquery-select2

jquery-select2-4