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

时间:2018-01-01 12:25:28

标签: jquery laravel-5 jquery-select2

我正在使用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>

1 个答案:

答案 0 :(得分:0)

您可以通过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>