gpt4 book ai didi

jquery - Select2 在 Bootstrap 选项卡中不起作用

转载 作者:行者123 更新时间:2023-12-03 22:09:40 31 4
gpt4 key购买 nike

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

最佳答案

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

这是修复

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

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

每当更改选项卡时,它都会激活该功能

关于jquery - Select2 在 Bootstrap 选项卡中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55277454/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com