Select2 Значения по умолчанию для нескольких выбранных и разрешенных тегов

У меня есть выбор 2 выбрать несколько

<select multiple name="event_type[]" class="form-control" id="selectEvents">
   @foreach ($eTypes as $type)
       <option>{{$type}}</option>
   @endforeach
</select>

Я хочу установить некоторые значения по умолчанию на тот случай, если пользователь редактирует форму. Я успешно сделал это, делая это

var s2 = $("#selectEvents").select2({
    placeholder: "Choose event type",
    tags: true
});

s2.val(["Trade Fair", "CA", "Party"]).trigger("change"); //CA doesn't show as a default

Но проблема в том, что я позволяю пользователям сгенерировать опции, используяtags: true опция для выбора2.

Когда я устанавливаю значение по умолчанию, которое изначально было в параметрах html, оно работает, но когда я устанавливаю значение по умолчанию, созданное пользователем, оно не работает.

Я впервые использую select2.

Как я могу достичь этого?

 rafinskipg03 мар. 2017 г., 11:32
Смотрите этот другой ответ здесь:stackoverflow.com/a/42576487/1635774

Ответы на вопрос(2)

Решение Вопроса

GitHub.

Один из вариантов - проверить, существует ли значение, иappend это если это не так.

var s2 = $("#selectEvents").select2({
    placeholder: "Choose event type",
    tags: true
});

var vals = ["Trade Fair", "CA", "Party"];

vals.forEach(function(e){
if(!s2.find('option:contains(' + e + ')').length) 
  s2.append($('<option>').text(e));
});

s2.val(vals).trigger("change"); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>

<select multiple name="event_type[]" class="form-control" id="selectEvents">
  <option>Trade Fair</option>
  <option>Party</option>
  <option>Foo</option>
  <option>Bar</option>
</select>

множественные' и 'теги' в PHP-скрипте, и я столкнулся с подобной проблемой. В документации говорится о добавлении любых начальных выделений в виде тегов опций html, но когда я попытался добавить два, в моем элементе управления select2 отобразился только один.

Я закончил инициализацию элемента управления select2 параметром «data» объекта конфигурации, который я бы создал динамически.

var initialPropertyOptions = [];
@foreach ($model->properties as $initialProperty`)
    var initialPropertyOption = {
        id:         {{ $initialProperty->id }},
        text:       '{{ $initialProperty->name }}',
        selected:   true
    }
    initialPropertyOptions.push(initialPropertyOption);
@endforeach

$('#properties').select2({
    ajax: {
        url:        route('models.propertySearch'),
        dataType:   'json',
        delay:      250,
        processResults: function(data) {
            return {
                results: data
            }
        }
    },
    placeholder:        'Enter property name',
    minimumInputLength: 1,
    multiple:           true,
    tags:               true,
    data:               initialPropertyOptions
});
<div>
    <label for="properties">Properties</label>
    <select name="properties[]" id="properties">
    </select>
</div>

Ваш ответ на вопрос