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

当前回答

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

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

2019-03-13 11:54:52

其他回答

我在一个应用程序中遇到了一个半相关的问题，所以我将输入我的2c。

我有多个形态的形式包含select2小部件。打开模态A，然后打开模态A中的另一个模态，将导致模态B中的select2小部件消失，无法初始化。

这些模式都是通过ajax加载表单的。

解决方案是在关闭模态时从dom中删除表单。

$(document).on('hidden.bs.modal', '.modal', function(e) {
    // make sure we don't leave any select2 widgets around 
    $(this).find('.my-form').remove();
});

2018-12-02 20:59:24

好的，我把它弄好了。

改变

<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">

<div id="myModal" class="modal hide fade" 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">

（从模态中删除 tabindex=“-1”）

2013-08-28 12:07:07

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

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

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

2019-10-10 11:15:03

在页面上使用此代码

$(function () {
    $(".select2").select2({
        dropdownParent: $('#myModal')
    });

    $("#myModal").on('change', '#vdn_number', function () {
        var term = $(this).val();
        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 };
            }
        });
    });
});

我想这对你有帮助

2021-11-29 10:29:32

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

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

2021-03-23 23:52:04

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

推荐文章

最新文章

标签