Select2 is Not Working In bootstrap 4 and laravel - php

Question

Select2 is not working. I don't see any effect. I need to apply "Multi-select boxes (pillbox)" style From Select2.
I am using bootstrap 4. I think this is the problem.
What I have tried so far is showed below,
PHP
<div class="form-group" >
<label for="exampleFormControlInput">Tags</label>
<select multiple class="form-control tags"> > <!-- Multiple To Select more than one but need press ctrl+select -->
#foreach ($tags as $tagname)
<option>{{$tagname->tag}}</option>
#endforeach
</select>
Script
<script type="text/javascript">
${(function() {
$('.tags').select2();
});
</script>

Answer 1

First make sure you have imported the css and the javascript file
This is my view, I used select2 in my vendor.
<label>Vendor <span style="color: red">*</span></label>
<select class="form-control" name="vendor_id" required="required" id="vendor">
<option value="">Select Vendor</option>
#if($vendors)
#foreach($vendors as $key => $value)
<option value="{{ $value->id }}">{{ $value->name }}</option>
#endforeach
#endif
</select>
As you can see I declared an id because I will use it in my select2. See my code below how I implement the select2 in my vendor.
$('#vendor').select2({
placeholder: "Select Vendor" // you can change this
});
And if you want some event with that select2 here my code.
$(document).on('select2:select', '#vendor', function(e){
var id = $(this).val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
})
$.ajax({
url: '/purchases/purchase-orders/getVendorTerms',
type: "POST",
data: {id:id},
success: function(response) {
if (response != '') {
$('#terms').val(response.term);
}else{
$('#terms').val('');
}
editGetGoodThru();
}
});
})

Answer 2

Select2 depends on the order of js included, try including them in order below.
Like jQuery ->jQuery UI -> Bootstrap -> Select2.