如何通过另一表中作为外键的表ID获取关联表字段值

整个实现基于你现有的Laravel Blade模板逻辑，无刷新联动，步骤如下：

1. 后端模型&控制器关联预加载 #

首先在Customer模型中定义和linked表的关联关系，避免重复查库：

// app/Models/Customer.php 内新增关联方法
public function linkedItems()
{
    return $this->hasMany(\App\Models\Linked::class, 'fk_customer_id');
}

在渲染该表单的控制器方法中，查询客户时预加载关联的图片数据：

// 控制器传值到视图的逻辑
$customers = Customer::with('linkedItems')->get();
return view('你的视图文件路径', compact('customers'));

2. 修改视图代码 #

修正原select标签的冗余属性（原代码重复写了2次name属性，select标签直接加value不生效），新增图片展示容器，把每个客户对应的图片数据存在option自定义属性上：

<select id="customer_select" type="search" name="customer_id" class="form-control @error('customer_id') is-invalid @enderror" required>
    <option value="" selected>Select Customer to link Item</option>
    @foreach ($customers as $customer)
    <option value="{{ $customer->id }}" 
        @selected(old('customer_id') == $customer->id)
        data-images='@json($customer->linkedItems->pluck("item_image"))'>
        {{ $customer->customer_name }}
    </option>
    @endforeach
</select>

<!-- 关联图片展示区，默认隐藏 -->
<div id="linked_image_container" class="mt-3 d-none">
    <p class="mb-2">该客户关联的素材：</p>
    <div class="d-flex flex-wrap gap-2" id="image_list"></div>
</div>

3. 新增前端联动JS #

监听下拉框选中事件，读取选中客户的图片数据渲染到页面，同时兼容表单验证失败返回时自动回显：

const customerSelect = document.getElementById('customer_select');
const imgContainer = document.getElementById('linked_image_container');
const imgList = document.getElementById('image_list');

customerSelect.addEventListener('change', () => {
  imgList.innerHTML = '';
  const currentOpt = customerSelect.options[customerSelect.selectedIndex];
  const images = JSON.parse(currentOpt.dataset.images || '[]');

  // 未选客户/无关联图片时隐藏容器
  if (!customerSelect.value || !images.length) {
    imgContainer.classList.add('d-none');
    return;
  }

  // 渲染所有关联图片
  images.forEach(imgPath => {
    const img = document.createElement('img');
    // 替换为你实际的图片访问前缀，比如公开目录上传则改为 /uploads/ + imgPath
    img.src = `/storage/${imgPath}`;
    img.width = 120;
    img.height = 120;
    img.style.objectFit = 'cover';
    img.className = 'img-thumbnail';
    imgList.appendChild(img);
  });

  imgContainer.classList.remove('d-none');
});

// 表单验证返回时自动触发回显
if (customerSelect.value) customerSelect.dispatchEvent(new Event('change'));

补充说明 #

• 如果客户总量大、单客户关联图片超过20张，可以把前端读data属性的逻辑改成选中后发AJAX请求到后端取对应图片数据，减少首屏加载的数据量。
• 图片路径前缀根据你实际的文件存储配置调整，确保前端能正常访问到图片资源即可。

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