How to handle multi-select drop-down forms for each row when implementing dynamic form saving in Laravel

Question

In my form, I have a dynamic table with multi-select dropdowns color_id[] and size_id[] with the same name in each row. I don't know how to save multiple selected values ​​as comma separated values ​​in each row stored in the database. I tried saving to database here but it didn't work.

HTML code:

<table><tbody><td><select name="color_id[]" class="select2" id=" ;color_id" style="width:200px; height:100px;" required multiple></select></td><td> <select name="size_id[]" class=" select2" id="size_id" style="width:200px; height:100px;" required multiple> </select></td></tbody></table>

Laravel code saved in controller:

$class_ids = $request->input('class_ids');
 for($x=0; $x<count($class_ids); $x ) {
    #code...
    $color_ids = implode(',', $request->color_id[$x]);
    $size_ids = implode(',', $request->size_id[$x]);
     $data3[]=array(
            
        'bom_code'=>$TrNo,
        'bom_date'=>$request->bom_date,
        'cost_type_id'=>$request->cost_type_id,
        'Ac_code'=>$request->Ac_code,
        'season_id'=>$request->season_id,
        'currency_id'=>$request->currency_id,
        'item_code' => $request->item_codes[$x],
        'class_id' => $request->class_ids[$x],
        'description' => $request->descriptions[$x],
        'color_id' => $color_ids,
        'size_array' => $size_ids,
        'consumption' => $request->consumptions[$x],
        'unit_id'=> $request->unit_ids[$x],
        'rate_per_unit' => $request->rate_per_units[$x],
        'wastage' => $request->wastages[$x],
        'bom_qty' => $request->bom_qtys[$x],
        'total_amount' => $request->total_amounts[$x],
       
         );
        }
      BOMSewingTrimsDetailModel::insert($data3);

Answer 1

I added two hidden input boxes in the same column of each row, named color_arrays[] and size_arrays[]. I wrote the following JavaScript function to get the comma separated values ​​from a multi-select dropdown box for color and size and save the value of the hidden input box to the database.

$(document).on('change', 'select[name^="color_id[]"],select[name^="size_id[]"]', function(){CalculateQtyRowPros2($(this).closest("tr"));});

function CalculateQtyRowPros2(row){   
var color_id=row.find('select[name^="color_id[]"]').val().join(",");
var size_id=row.find('select[name^="size_id[]"]').val().join(",");
row.find('input[name^="color_arrays[]"]').val(color_id);
row.find('input[name^="size_arrays[]"]').val(size_id);}

This works for me.