Select2 Default Values For Multiple Select And Allowed Tags
I have a select 2 multi-select option
Solution 1:
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" />
<select multiple name="event_type[]" class="form-control" id="selectEvents">
<option>Trade Fair</option>
<option>Party</option>
<option>Foo</option>
<option>Bar</option>
</select>Solution 2:
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>Solution 3:
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');
Post a Comment for "Select2 Default Values For Multiple Select And Allowed Tags"