Question

在模态下我无法输入select2下拉列表。我知道之前有过类似的问题。我已经尝试过在论坛中提出的所有建议。以下是使用select2与我的模态窗口相关的代码部分。

Index.cshtml：

<a href="" class="btn btn-primary btn-sm btn-block" id="TicketCircuit" role="button">CABS</a>


<div id="TicketCABSModal"></div>


     $("#TicketCircuit").click(function (event) {
    event.preventDefault();
    $.ajax({
        url: '@Url.Action("CABS", "Maintenanace")',
        type: 'GET',
        contentType: 'application/json',
    }).done(function (data) {
        $('#TicketCABSModal').html(data);
        $('#TicketCABS').modal('show');
    }).fail(function (jqXHR, status, error) {
        alert('failed: ' + error + ' status ' + status);
    });
});

我正在调用MVC控制器来获取View html数据.Below是View。

<div class="modal fade" id="TicketCABS"  role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content" style="">
        <div class="modal-header ">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            <h4 class="modal-title">CABS</h4>
        </div>
        <div class="modal-body" >

        </div>
        <div class="modal-footer">
            <button type="button" id="Close" data-dismiss="modal" class="btn btn-default ">Close</button>
        </div>
    </div>
</div>

我尝试了以下建议：

删除 tabindex
更改 Z-index
通过以下方式$.fn.modal.Constructor.prototype.enforceFocus
覆盖$.fn.modal.Constructor.prototype.enforceFocus=function(){};
和

$.fn.modal.Constructor.prototype.enforceFocus = function () { var that = this; $(document).on('focusin.modal', function (e) { if ($(e.target).hasClass('select2-modal')) { return true; } if (that.$element[0] !== e.target && !that.$element.has(e.target).length) { that.$element.focus(); } }); };

以上解决方案均无效。我使用 Bootstrap V3.3.4 ， Jquery 2.1.4 和 select2 V 3.5.2 。我不确定为什么它不起作用。请帮忙!!

Answer 1

我刚刚找到了解决问题的简单方法。希望它对某人有用。我只使用 $（选择器）.append（数据）而不是 $（选择器）.html（数据）。最后这很简单。

Select2不使用bootstrap Modal窗口

1 个答案: