Select2在嵌入自举模式时不起作用

当我在引导模式中使用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>

$("#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在嵌入引导模式时不起作用

当前回答

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

    $('#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时，它是这样开始的。当我取出它时，一切都好了。

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

谢谢。

2020-09-17 05:56:00

其他回答

我以前遇到过这个问题，我用yii2解决了它

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

2017-05-16 16:11:53

如果你的iPad键盘在点击select2输入时隐藏了引导模式，你可以通过在select2输入初始化后添加以下规则来解决这个问题:

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
   var styleEl = document.createElement('style'), styleSheet;
   document.head.appendChild(styleEl);
   styleSheet = styleEl.sheet;
   styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
   document.body.scrollTop = 0; // Only for Safari
}

摘自https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475

编辑:如果你的选项没有正确显示，你需要在初始化select2时使用dropdownParent属性:

$(".select2").select2({
    dropdownParent: $("#YOURMODALID")
});

祝你好运

2018-02-05 13:45:54

你不应该像大多数答案中建议的那样，将下拉框固定在情态动词上。如果你的select2在模态的底部，你需要向下滚动来找到它，那么你就会有一个下拉的位置问题，因为你把它粘在了模态上。

相反，您应该将下拉父目录设置为输入父目录。在你的例子中，它应该是这样的

$(document).ready(function() {
  $("#vdn_number").select2({
    dropdownParent: $("#vdn_number").parent()
  });
});

2022-01-31 17:04:29

在我的情况下，我这样做，它工作。我使用bundle来加载它，在这种情况下，它为我工作

 $(document).on('select2:select', '#Id_Producto', function (evt) {
   // Here your code...
  });

2019-03-13 11:54:52

我只是通过包含select2。min。css来让它工作

试一试

我的模态html bootstrap 3是

<div id="changeTransportUserRequestPopup" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 40%!important; ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>Warning</h3>
            </div>
            <div class="modal-body" id="changeTransportUserRequestPopupBody">
                <select id="cbTransport" class="js-example-basic-single" name="cbTransport" style="width:100%!important;"></select>
            </div>
            <div class="modal-footer">
                <button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">Cancel</button>
                <button type="submit" id="yesChangeTransportPost" class="btn btn-success" name="yesChangeTransportPost" value="true" data-dismiss="modal">Yes</button>
            </div>
        </div>
    </div>
</div>

2018-09-06 01:39:48

Select2在嵌入自举模式时不起作用

推荐文章

最新文章

标签