Jquery 选择2在引导选项卡内不工作

我的表单中有几个不同语言的选项卡。 我正在尝试使用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

@foreach（$languages作为$language）
first？'class=active'：''}>

@endforeach

@foreach（$languages作为$language）
主要
{{{{（'tags'，[]，$language->code）}
@foreach（$tags作为$tag）
{{$tag->translate（$language->code）->name}
@endforeach
@如果（$errors->has（'language'.$language->code'..tags'））
{{$errors->first（'language...$language->code.'.tags'）}
@恩迪夫
@endforeach
@推送（'脚本'）
$（文档）.ready（函数（）{
//选择2
$（“select.select2”）。选择2({
标签：真的
})
})
@端推

这里有一些照片

---

多亏了@Rory McCrossan的评论，我研究并解决了这个问题

这是解决办法

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

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

---

每当更改选项卡时，它就会激活该函数

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