Question

尝试最终切换到4.0版本的select2并遇到问题。

所有这一切在3.5上完全正常。单击按钮，打开引导模式并将远程页面加载到其中。我已经测试了普通页面上的所有内容（不是模态）并且它可以正常工作。当加载模式时，模态打开，类似于它的所有内容都是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验证脚本（我在这里没有包含这个），再次，在3.5中工作正常。你能不能用4.0或其他东西添加到select2（）？

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

UPDATE2：

实现了4.0更改的事件，所以这似乎有效：

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

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

Answer 1

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

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

内容/文字的突出显示已消失。对搜索框的关注消失了。现在一切似乎都很好。我目前没有任何关于这条线实际上做了什么的信息，但是会研究这个以找出并将其添加回来供将来参考。

select2 4.0 - TypeError：$（...）。select2（...）。select2（...）未定义

1 个答案: