Select2 Default values for multiple select and allowed tags
I recently had to implement a select2 with options 'multiple' and 'tags' in a PHP script, and ran into a similar problem. The documentation said to add any initial selections as html option tags, but when I tried to add two, only one would show up in my select2 control.
I ended up initializing the select2 control with the config object 'data' option, which I would create dynamically.
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>
An other simple way is set value to select option and make it select2 again :
$('#properties').val(["Trade Fair", "CA", "Party"]); $('#properties').select2({});
It is working for me
Little improvement:
$('#province').val(["3", "4", "5"]).trigger('change');
Doing a little digging, I can see this issue raised on GitHub.
One option is to check to see if the value exists, and append
it if it doesn't.
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>