如何在Blade视图的同级表格间传递选中值？

我有两个同级表格，需要实现第一个表格第三列（下拉选择框）的选中值传递至第二个表格对应行的功能。目前已完成的内容：

• 第一个表格可通过点击「Add Cells」按钮，借助JQuery实现新增输入行
• 第二个表格会根据第一个表格的行数同步新增对应行数

现需补充两个表格间的值传递逻辑。

第一个表格Blade代码 #

<table class="table table-bordered table_field4" id="table_field4" style ="overflow-x: auto;white-space: nowrap;">
    <thead>
        <tr class="thead-dark">
            <th> #</th>
            <th style="width: 250px; !important">first</th>
            <th style="width: 250px; !important">second </th>
            <th style="width: 200px; !important">third</th>
            <th style="width: 200px; !important"></th>
        </tr>
    </thead>
    <tbody>
        <tr class="trr">
            <?php $x=1;?>
            <td>1</td>
            <td style="display:none;"><input type="text"  name="prod_idd[]" style="display:none;" value="{{$lastid->id}}"></td>
            <td>
                <input type="text" style="width: 250px; !important" class="sub_code form-control getAllCode putCode" name="sub_code[]">
                @error('sub_code.*')
                <div class="alert alert-danger" role="alert">
                {{$message}}
                </div>
                @enderror
            </td>
            <!-- heeree -->
            <td>
                <input type="text" style="width: 250px; !important" class=" form-control  " name="count_pices[]">
                @error('.*')
                <div class="alert alert-danger" role="alert">
                {{$message}}
                </div>
                @enderror
            </td>
            <td>
                <select style="width: 150px; !important"   class="form-control getUnit" name="unit_id[]">
                        @foreach ($units as $unit)
                            <option value="{{$unit->id}}" name="{{$unit->unit_code}}">{{$unit->unit_name . ' ( ' . $unit->unit_code . ' ) '}}
                            </option>
                        @endforeach
                    </select>
            </td>
            <td style="width: 200px; !important"><input type="button" class="btn btn-success" name="add4" id="add4" value="Add Cells" ></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
        </tr>
    </tfoot>
</table>

第一个表格新增行的JQuery代码（已优化） #

$('#add4').click(function(){
    var size = $('#table_field4 tbody').children().length +1;
    var html = '<tr class="trr">'+
        '<td>'+size+'</td>'+
        '<td style="display:none;"><input type="text"  name="prod_idd[]" style="display:none;" value="{{$lastid->id}}"></td>'+
        '<td><input type="text" class="form-control sub_code putCode" name="sub_code[]"></td>'+
        '<td><input type="text" class="count_pices form-control" name="count_pices[]"></td>'+
        '<td><select style="width: 150px; !important"   class="form-control getUnit" name="unit_id[]">'+
            '@foreach ($units as $unit)'+
                '<option value="{{$unit->id}}" name="{{$unit->unit_code}}">{{$unit->unit_name . ' ( ' . $unit->unit_code . ' ) '}}</option>'+
            '@endforeach'+
        '</select></td>'+
        '<td><input type="button" class="btn btn-danger remove" value="delete" style="color:black;background-color:red;"></td>'+
    '</tr>';
    $('#table_field4').append(html);
    // 给新增的下拉框绑定值传递事件
    bindUnitSelectEvent();
});

$('#table_field4').on('click','.remove',function(){
    var rowIndex = $(this).closest('tr').index();
    // 删除第一个表格行的同时，同步删除第二个表格对应行
    $('#table_field5 tbody tr').eq(rowIndex).remove();
    $(this).closest('tr').remove();
});

第二个表格Blade代码 #

<table class="table table-bordered table_field5" id="table_field5" style ="overflow-x: auto;white-space: nowrap;">
    <thead>
        <tr class="thead-dark">
            <th style="width: 100px; !important">C</th>
            <th style="width: 100px; !important">الكويت</th>
            <th style="width: 100px; !important">A</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td ><input type="text" name="" ></td>
            <td ><input type="text" name="" ></td>
            <td ><input type="text" name="" ></td>            
        </tr>
    </tbody>
    <tfoot>
        <tr>
        </tr>
    </tfoot>
</table>

同步第二个表格行数的JQuery代码 #

$('#add4').click(function(){
    var html = '<tr>'+
        '<td><input type="text" value="" ></td>'+
        '<td ><input type="text" name="value[]" ></td>'+
        '<td ><input type="text" name="value[]" ></td>'+
    '</tr>';
    $('#table_field5 tbody').append(html);
});

实现值传递的核心逻辑 #

添加以下JQuery代码，实现下拉框选中值传递到第二个表格对应行的指定列（默认传递到第二个表格第二列输入框，可根据需求调整目标列索引）：

// 初始化时绑定已有下拉框的事件
bindUnitSelectEvent();

// 绑定下拉框change事件的通用函数
function bindUnitSelectEvent() {
    $('.getUnit').off('change').on('change', function() {
        // 获取当前下拉框所在行的索引
        var rowIndex = $(this).closest('tr').index();
        // 获取选中的文本（若需传递value值，替换为$(this).val()）
        var selectedContent = $(this).find('option:selected').text();
        // 将值填入第二个表格对应行的指定输入框（此处索引1对应第二列）
        $('#table_field5 tbody tr').eq(rowIndex).find('input').eq(1).val(selectedContent);
    });
}

功能说明 #

1. 第一个表格下拉框选中值变化时，自动将选中内容同步到第二个表格对应行的指定输入框
2. 新增行时自动为新下拉框绑定事件，确保新增行也能触发值传递
3. 删除第一个表格行时，同步删除第二个表格对应行，避免行数不匹配

内容的提问来源于stack exchange，提问作者user20626943