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

当前回答

在我的情况下，我有两个情态动词同样的问题，所有都解决了使用:

$('.select2').each(function() { 
    $(this).select2({ dropdownParent: $(this).parent()});
})

正如在项目问题#41中，一个用户说。

2019-10-10 11:15:03

其他回答

只需删除tabindex="-1"并添加样式overflow:hidden

这里有一个例子:

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>

2016-12-16 15:09:31

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

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

2019-03-13 11:54:52

为了更好地理解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开发人员网络

2016-06-05 18:05:44

这个问题解决了工作为我单一Jquery函数

$('#myModal .select2').each(function() {  
   var $p = $(this).parent(); 
   $(this).select2({  
     dropdownParent: $p  
   });  
});

2018-10-09 05:50:13

对于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在嵌入自举模式时不起作用

推荐文章

最新文章

标签