如何检索存储在 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

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

$("#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>