当我在引导模式中使用select2 (input)时,我不能输入任何东西。就像残疾?在modal之外select2工作正常。

工作示例:http://jsfiddle.net/byJy8/1/ 代码:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Panel</h3>
    </div>
    <div class="modal-body" style="max-height: 800px">          
      <form class="form-horizontal">
        <!-- Text input-->
        <div class="control-group">
            <label class="control-label" for="vdn_number">Numer</label>
            <div class="controls">
                <!-- seleect2 -->
                <input name="vdn_number" type="hidden" id="vdn_number"  class="input-large" required=""  />
            </div>
        </div>
      </form>    
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

JS

$("#vdn_number").select2({
    placeholder: "00000",
    minimumInputLength: 2,
    ajax: {
        url: "getAjaxData/",
        dataType: 'json',
        type: "POST",
        data: function (term, page) {
            return {
                q: term, // search term
                col: 'vdn'
            };
        },
        results: function (data) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        }
    }
});

答案:

在这里你可以找到一个快速的解决方法

这里是“正确的方法”:Select2在嵌入引导模式时不起作用


当前回答

为了更好地理解tabindex元素是如何工作的,完成公认的回答:

The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:   -a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;   -0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;   -a positive value means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document.

来自:Mozilla开发人员网络

其他回答

在这里找到了对我有用的答案:https://github.com/select2/select2-bootstrap-theme/issues/41

$('select').select2({
    dropdownParent: $('#my_amazing_modal')
});

也不需要删除tabindex。

我也遇到过类似的问题,我用

    $('#CompId').select2({
              dropdownParent: $('#AssetsModal')
    });

还有modal with select

    <div class="modal fade" id="AssetsModal" role="dialog" 
    aria-labelledby="exampleModalCenterTitle" 
    aria-hidden="true"  style="overflow:hidden;" >
<div class="modal-dialog modal-dialog-centered" role="document">
  <div class="modal-content">
      <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle" >Добави активи</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">
          <form role="form" action="?action=dma_act_documents_assets_insert&Id=<?=$ID?>" 
                  method="post" name="dma_act_documents_assets_insert" 
                  id="dma_act_documents_assets_insert">
            <div class="form-group col-sm-12">
                  <label for="recipient-name" class="col-form-label">Актив:</label>
                  <span style="color: red">*</span>
                          <select class="form-control js-example-basic-single col-sm-12" 
                                 name="CompId" id="CompId">
                                  <option></option>
                          </select>
              </div>
          </form>
      </div>
  </div>
</div>

但我不知道为什么选择菜单比其他字段小

当开始使用select2时,它是这样开始的。当我取出它时,一切都好了。

有谁能分享一下这方面的经验吗?

谢谢。

我也有同样的问题,更新.select2-container的z-index应该可以解决这个问题。确保模态的z指数低于select2的z指数。

.select2-container {
    z-index: 99999;
}

更新: 如果上面的代码不能正常工作,也可以像@breq建议的那样从你的模式中删除表索引

在Bootstrap模态中使用Select2 Bootstrap 5主题,如下所示:

修复了select2 & bootstrap模态搜索输入错误。 修复选择选项后的select2 & bootstrap模式滚动错误。

jQuery(function() { $('.my-select2').each(function() { $(this).select2({ theme: "bootstrap-5", dropdownParent: $(this).parent(), // fix select2 search input focus bug }) }) // fix select2 bootstrap modal scroll bug $(document).on('select2:close', '.my-select2', function(e) { var evt = "scroll.select2" $(e.target).parents().off(evt) $(window).off(evt) }) }) <!DOCTYPE html> <html> <head> <!-- Styles --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.2.0/dist/select2-bootstrap-5-theme.min.css" /> <!-- Scripts --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Select2 v4.1 <select class="my-select2"> <option>Test 1</option> <option>Test 2</option> <option>Test 3</option> <option>Test 4</option> <option>Test 5</option> <option>Test 6</option> <option>Test 7</option> <option>Test 8</option> <option>Test 9</option> <option>Test 10</option> </select> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html>

我在github上找到了select2的解决方案

https://github.com/ivaynberg/select2/issues/1436

对于bootstrap 3,解决方案是:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4重命名了enforceFocus方法为_enforceFocus,所以你需要修补它:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

从以上链接复制的解释:

Bootstrap向focusin事件注册了一个监听器,它检查被聚焦的元素是覆盖本身还是它的后代——如果不是,它只是重新聚焦在覆盖上。随着select2下拉框被附加到正文,这有效地防止你在文本框中输入任何东西。 您可以通过覆盖在模态上注册事件的enforceFocus函数来快速修复这个问题