如何使用JavaScript实现表单选择分类后联动显示对应关联相册

方案说明 #

你的思路整体方向是对的，但有一个核心问题需要修正：Blade的@foreach是服务端渲染逻辑，页面加载完成后服务端代码已经执行完毕，客户端JS无法直接调用服务端的循环渲染逻辑，所以我们选择提前渲染所有相册、用JS控制显隐的方案实现，操作简单不需要额外学习成本，完全适配你现有技术基础。

具体实现步骤 #

1. 改造相册部分的Blade渲染代码 #

给每个相册选项添加关联分类ID的自定义属性，默认全部隐藏：

<!-- 相册容器 -->
<div id="album-wrapper">
  @foreach ($albums as $album)
    <!-- 每个相册项添加data-category-id属性存储关联的分类ID，默认隐藏 -->
    <div class="album-item" data-category-id="{{ $album->gallery_category_id }}" style="display: none;">
      <label class="capitalize">{{ $album->name }}</label>
      <input type="radio" name="album_id" value="{{ $album->id }}">
    </div>
  @endforeach
  <!-- 可选：无匹配相册时的提示 -->
  <div id="no-album-tip" style="display: none;">当前分类下暂无可用相册</div>
</div>

2. 编写原生JS实现联动逻辑 #

直接在页面底部添加如下JS代码即可，不需要引入额外框架：

// 获取所有分类单选框
const categoryRadios = document.querySelectorAll('input[name="gallery_category_id"]');
// 获取所有相册项
const albumItems = document.querySelectorAll('.album-item');
// 获取无相册提示元素
const noAlbumTip = document.getElementById('no-album-tip');

// 给每个分类单选框绑定选中事件
categoryRadios.forEach(radio => {
  radio.addEventListener('change', function() {
    const selectedCateId = this.value;
    let matchCount = 0;

    // 遍历所有相册，显示匹配当前分类的项
    albumItems.forEach(item => {
      if (item.dataset.categoryId === selectedCateId) {
        item.style.display = 'block';
        matchCount++;
      } else {
        item.style.display = 'none';
        // 隐藏时自动取消选中该相册，避免提交无效数据
        item.querySelector('input[name="album_id"]').checked = false;
      }
    });

    // 控制无相册提示的显隐
    noAlbumTip.style.display = matchCount === 0 ? 'block' : 'none';
  });
});

// 可选：如果页面加载时有默认选中的分类，自动触发一次联动展示对应相册
document.querySelector('input[name="gallery_category_id"]:checked')?.dispatchEvent(new Event('change'));

拓展说明 #

如果你的相册数据量超过千条，提前渲染全部相册会导致页面体积变大，这时可以选择异步请求方案：选中分类时把分类ID传给后端接口，后端返回对应分类的相册列表，JS再动态渲染相册选项即可，实现也相对简单。

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