select 多个 select 值来自 ajax 编辑按钮点击后的响应

Question

我有一个编辑按钮。当 onclick 事件触发时，来自主要 table 的数据显示在输入字段中，但来自数据透视表的相关数据未从 JSON 响应中获取 selected。在 JSON 输出中，我可以查看主要 table 数据以及与特定 ID 相关的数据透视数据。但是此数据未在多 select 元素中得到 selected。

主要 Table : 1)SchoolSubject 2)StudentClass

枢轴Table：Student_Class_School_Subject

控制器

public function EditSubject(Request $request)
{
    $id = $request->id; //get id from blade 
    $subject = SchoolSubject::with('class')->where('id',$id)->first();  //select subject data match with id with class stored in pivot          
    return response()->json($subject); //output comes with subject and class stored in pivot
}

edit.modal.blade.php

<div class="controls" id="classSelector">
    <select name="class_id[]" multiple="multiple" id="classSelect" required="" class="form-control">
        <option value="-1" selected="" disabled="">
         Select Class
        </option>
       @foreach ($allClassData as $class)
       <option value="{{ $class->id }}">                                                                                
            {{ $class->name }}
       </option>
       @endforeach                                                                        
   </select>
</div>

view.blade.php

@section
<script>
    $(document).on('click', '.editIcon', function(e) {
            e.preventDefault();
            let id = $(this).attr('id');                
            var _url = '{{ route('subject.edit.route') }}';
            $.ajax({
                url: _url,
                method: 'get',
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log(response.class);
                    $("#subject_id").val(response.id);//data from main table got successfully from same json response
                    $("#subject_i").val(response.subject); //data from main table got successfully from same json response
                    var pivotData = response.class; //this is data from pivot table but how to select multislect select box value from this json response
                    
                    jQuery("#classSelect option").each(function() {
                        if (jQuery.inArray($(this).val(), response.class) != -1) {
                            $(this).prop('selected', true);
                        };
                    }); //this query is not working

                    
                    /*var newHTML = [];
                    for (var i = 0; i < response.class.length; i++) {
                        newHTML.push('<span>' + response.class[i] + '</span>');
                        console.log(response.class[i])
                    }
                    $("#resultchecker").html(newHTML.join(""));*/
                }
            });
        });
</script>
@endsection

JSON 使用 response.class

来自枢轴 table 的响应

JSON 使用 response

来自枢轴 table 的响应

Answer 1

因为您的 JSON 中有一个嵌套的对象数组，您必须再次循环并 select id。我相信有更好的方法可以做到这一点，但至少你明白了。

更改此部分

jQuery("#classSelect option").each(function() {
   if (jQuery.inArray($(this).val(), response.class) != -1) {
      $(this).prop('selected', true);
   };
}); //this query is not working

像这样

jQuery("#classSelect option").each(function() {
   var $this = jQuery(this);
   response.class.forEach(element => {
      if($this.val() == element.id) {
         $this.prop('selected', true);
      }
   });
});

select 多个 select 值来自 ajax 编辑按钮点击后的响应

select multiselect values from ajax resonse after edit button click

javascript

php

jquery

laravel

laravel-9