Laravel Backpack javascript 选择选项的动态变化答案

【问题标题】：Laravel Backpack javascript dynamic change of select optionLaravel Backpack javascript 选择选项的动态变化
【发布时间】：2021-01-06 10:35:50
【问题描述】：

我正在运行 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 都没有足够的知识来理解为什么这不会绑定。

【问题讨论】：

现在到底发生了什么？是否触发了警报？
是的，警报被触发了，但是这个选择值赋值没有产生任何修改，这一行不起作用document.getElementById(fieldname).value = data.msg;
警报中fieldname的值是多少？另外，能否请您为该字段和其他应更新的字段添加字段配置？
这些是 select2 元素吗？如果是这样，你可以试试$('#'+fieldname).val(data.msg).trigger('change') 吗？
行得通，谢谢！你能解释一下为什么必须这样吗？

标签： laravel-backpack

【解决方案1】：

由您的字段配置创建的元素使用jquery select2 plugin 创建一个精美的选择框。它通过隐藏普通的 select 元素然后显示一个 html 结构来构建精美的下拉列表等来实现这一点。

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

要使插件显示的值发生变化，我们必须调用.trigger('change')，以便选择元素告诉任何正在侦听的javascript（即select2插件）它的内部值已更改，插件现在应该将其显示更新为匹配。即，运行这个：

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

See more detailed documentation here

【讨论】：