Select2 在引导选项卡中不起作用

Posted 2023-05-07

【中文标题】Select2 在引导选项卡中不起作用

【英文标题】：Select2 not working inside a bootstrap tab

【发布时间】：2019-08-12 03:10:23

【问题描述】：

我的表单中有几个用于不同语言的选项卡。 我正在尝试使用 select2 插件添加标签字段。 在首先显示的选项卡中，它工作正常，但是当我切换到其他选项卡时，它无法正确显示。

这里有一些代码

<div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
        @foreach($languages as $language)
            <li  $loop->first ? 'class=active' : '' >
                <a href="#insurance_ $language->code " data-toggle="tab"> title_case($language->native) </a>
            </li>
        @endforeach
    </ul>
    <div class="tab-content">
        @foreach($languages as $language)
            <div class="tab-pane  $loop->first ? 'active' : '' " id="insurance_ $language->code ">
                <h4>Main</h4>
                <div class="form-group  $errors->has('language.'.$language->code.'.tags') ? 'has-error' : '' ">
                    <label for=" $language->code -tags"> __('tags',[],$language->code) </label>
                    <select name="language[ $language->code ][tags][]" id=" $language->code -tags" class="form-control select2" multiple="multiple">
                        @foreach($tags as $tag)
                            <option value=" $tag->id "> $tag->translate($language->code)->name </option>
                        @endforeach
                    </select>
                    @if($errors->has('language.'.$language->code.'.tags'))
                        <span class="help-block"> $errors->first('language.'.$language->code.'.tags') </span>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
</div>

   @push('scripts')
<script type="text/javascript">
    $(document).ready(function() 
        // Select2
        $("select.select2").select2(
            tags: true
        )
    )
</script>
@endpush

这里有一些图片 http://prntscr.com/n0w534 http://prntscr.com/n0w5b8

【问题讨论】：

这是因为 Select2 构造函数依赖于能够读取输入元素的尺寸，当它还不是 DOM 的一部分或隐藏时无法做到这一点。要解决此问题，请在选项卡可见时实例化 Select2。根据您使用的选项卡控件，应该有一些“显示”事件或类似事件，您可以挂钩

【参考方案1】：

感谢@Rory McCrossan 的评论，我研究并弄清楚了。

解决方法

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
    changeSelect()
)

// Select2
function changeSelect() 
    $("select.select2").select2(
        tags: true
    )

每当标签改变时它都会激活该功能