如何检索存储在select2下拉列表中的数据？

Question

我正在使用laravel 5和select2下拉列表来选择类似于stackoverflow标记字段的各种标记。

因此，一旦选择了多个标签，我想以数组的形式检索它们，并在laravel 5的控制器中使用它来验证和存储。

此外，如果用户点击编辑帖子，我想在database的下拉列表中添加所有标签，以便用户可以轻松进行更改。

1）所以主要我想知道如何从select2检索数组形式的数据

2）当用户点击编辑时，用数据填充select2如何实现这两个功能？

<select multiple="multiple"
    id="tag_select"
    class="form-control{{ $errors->has('tag_select') ? ' is-invalid' : '' }}"
    name="tag_select"
    value="{{ old('tag_select') }}"
    required
    >

    <option value="">PHP</option>
    <option value="">C++</option>
</select>

<script>
    $( document ).ready(function() {

        $("#tag_select").select2();

        $('#show_select').click(function(){
            $("#tag_select").text();
        });
    });
</script>

Answer 1

你可以通过tags事件选择select2:select：

$("#class_select").select2();

var tagsArray = new Array();

$('#class_select').on('select2:select', function(e) {
  var text = e.params.data.text; // get text
  var id = e.params.data.id; // get value

  tagsArray.push(text);
  console.log(tagsArray);
});

select#class_select {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>

<select multiple="multiple" id="class_select" class="form-control" name="tag_select" required>
    <option value="1">PHP</option>
    <option value="2">C++</option>
</select>

您也可以通过本地html选择：

$("#class_select").select2();

var tagsArray = new Array();

$('#class_select').on('change', function() {
  var val = $(this).val();
  tagsArray.push(val);
  console.log(tagsArray);
});

select#class_select {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>

<select multiple="multiple" id="class_select" class="form-control" name="tag_select[]" required>
    <option value="1">PHP</option>
    <option value="2">C++</option>
</select>