Select2 multiselect从数据库中选择项目与Laravel 8



我有一个小问题。我有一个Select2多选择字段在我的编辑表单。现在我的目标是我的脚本加载所有的选项,并且正确的选项是预先选择的。

我已经尝试了整个事情,但到目前为止还没有导致预期的结果

这是我的代码

multiselect的控制器片段。

// Convert multiselect in right form
$product = $product['tags'];
$new = serialize($user);
$product['tags'] = $new;

edit.blade.php(片段)

<div class="form-group">
<label for="tag">Product Tags</label>
<select id="tag" class="select2 select2-hidden-accessible {{ $errors->has('tags') ? 'error' : '' }}" multiple="multiple" name="tags[]" style="width: 100%;" data-select2-id="5" tabindex="-1" aria-hidden="true" value="1">
@foreach($tags as $tag)
<option value="{{ $tag->id }}" {{ in_array($tag->id, $prisoner->tag) ? 'selected="selected"' : '' }}>{{ $tag->label }} - {{ $tag->name }}</option>
@endif
@endforeach
</select>
</div>

小js代码:

$('#tag').select2({ placeholder: "Please select" }).trigger('change');

我希望有人能帮助我。

解决方案示例:与id标签s

var values = $('#tags option[selected="true"]').map(function() { return $(this).val(); }).get();
// you have no need of .trigger("change") if you dont want to trigger an event
$('#tags').select2({ placeholder: "Please select" });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select id="tags" select2 select2-hidden-accessible multiple="multiple" style="width: 300px">
<option value="1" selected="true">Apple1</option>
<option value="2">Bat</option>
<option value="Cat">Cat</option>
<option value="Dog" selected>Dog1</option>
<option value="Elephant">Elephant</option>
<option value="View/Exposure" >View/Exposure</option>
<option value="View / Exposure">View / Exposure</option>
<option value="Dummy - Data" selected>Dummy - Data</option>
<option value="Dummy-Data">Dummy-Data</option>
<option value="Dummy:Data">Dummy:Data</option>
<option value="Dummy(Data)">Dummy(Data)</option>    
</select>
</body>
</html>

最新更新