Laravel Backpack javascript dynamic change of select option - laravel-backpack

Question

I am running laravel backpack 3.4 and created a custom select2 fieldtype from the standard one, I am now trying to based on an onchange event change the value selected on another select options but no change is happening
This is the field declararion
<select onchange="updateunit(this, '{{$field['name']}}' )" id="{{$field['name']}}_<% $index %>" data-index="<% $index %>"
ng-model="item.{{ $field['name'] }}"
[ngValue]="value"
#include('crud::inc.field_attributes', ['default_class' => 'form-control select2'])
>
<option value="">-</option>
#if (isset($field['model']))
#foreach ($field['model']::all() as $connected_entity_entry)
<option value="{{ $connected_entity_entry->getKey() }}"
>{{ $connected_entity_entry->{$field['attribute']} }}</option>
#endforeach
#endif
</select>
And this is the way I am trying to modify the select field selected option
function updateunit(object,name){
var fieldname;
fieldname = object.id;
fieldname = fieldname.replace('product_id','order_unit');
/* data:'_token = <?php echo csrf_token() ?>', */
$.ajax({
type:'POST',
url:'/getmsg',
data: {id:object.value},
async: false,
success:function(data) {
alert(fieldname);
alert(data.msg);
document.getElementById(fieldname).value = data.msg;
},
error:function(){alert('Unidade de Compra não está definida')},
});
This is not working, but I have not enough knowledge either on JS neither Angular to understand why this won't bind.

Answer 1

The elements that are created by your field configurations use the jquery select2 plugin to create a fancy select box. It does this by hiding the plain select element then displaying an html structure that builds the fancy dropdown etc in its place.
document.getElementById(fieldname).value = data.msg; will set the value of the hidden select field, but will not update the value shown by the plugin's fancy html dropdown.
To make the value that's display by the plugin change, we have to call .trigger('change') so the select element tells any listening javascript (ie the select2 plugin) that it's internal value has changed and the plugin should now update its display to match. ie, run this:
$('#'+fieldname).val(data.msg).trigger('change')
See more detailed documentation here