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

当前回答

$("#IlceId").select2({
    allowClear: true,
    multiple: false,
    dropdownParent: $("#IlceId").parent(),
    escapeMarkup: function (m) {
        return m;
    },
});

这段代码正在工作。谢谢你！

2017-12-19 08:16:54

其他回答

对于Select2 v4:

使用dropdownParent将下拉框附加到模态对话框，而不是HTML主体。

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <select id="select2insidemodal" multiple="multiple">
          <option value="AL">Alabama</option>
            ...
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script>

$(document).ready(function() {
  $("#select2insidemodal").select2({
    dropdownParent: $("#myModal")
  });
});

</script>

这将附加Select2下拉框，因此它位于模态的DOM中，而不是HTML主体(默认)。看到https://select2.org/dropdown dropdown-placement

2015-11-24 01:53:17

我有同样的问题与select2在bootstrap模式，解决方案是删除溢出y: auto;而溢出:隐藏;来自。modal-open和。modal类

下面是使用jQuery删除溢出的示例:

$('.modal').css('overflow-y','visible');
$('.modal').css('overflow','visible');

2017-04-28 10:46:11

从模式中删除tabindex="-1"。我检查了这个解决方案，它是有效的。

裁判:https://github.com/select2/select2-bootstrap-theme/issues/41

2021-03-23 23:52:04

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

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

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

2022-01-31 17:04:29

$('.modal').on('shown.bs.modal', function (e) {
    $(this).find('.select2me').select2({
        dropdownParent: $(this).find('.modal-content')
    });
})

2019-03-04 16:07:32

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

推荐文章

最新文章

标签