Laravel Backpack JavaScript动态更改选择选项

问题描述

我正在运行laravel背包3.4，并从标准字段中创建了一个自定义的select2字段类型，现在我试图基于onchange事件更改在另一个选择选项上选择的值，但是没有发生更改

这是字段声明

<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>

这是我尝试修改选择字段中选定选项的方法

    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')},});

这是行不通的，但是我对JS和Angular都没有足够的了解，以了解为什么它不会绑定。

解决方法

由您的字段配置创建的元素使用jquery select2 plugin创建一个精美的选择框。它是通过隐藏普通的select元素，然后显示一个在其位置构建精美下拉菜单的html结构来实现的。

document.getElementById(fieldname).value = data.msg;将设置隐藏选择字段的值，但不会更新插件的html下拉菜单中显示的值。

要更改插件显示的值，我们必须调用.trigger('change')，以便select元素告知所有正在监听的javascript（即select2插件）其内部值已更改，并且插件现在应更新其内部值。显示匹配。即运行此：

$('#'+fieldname).val(data.msg).trigger('change')

See more detailed documentation here