如何在两个SelectList的foreach循环之间传递值？

嘿，要搞定两个下拉选的联动需求，核心就是监听第一个下拉的选中事件，拿到SeriesID后动态筛选第二个下拉的选项。我给你分步骤调整代码：

第一步：调整Razor代码，准备数据并添加事件监听 #

先给第一个下拉选加上选中事件监听，同时把所有季节数据序列化到前端JS变量里（不用每次发请求，直接前端筛选更流畅）：

<!-- 第一个下拉选：添加onchange事件触发联动 -->
<select id="Select1" size="10" name="SeriesID" class="form-control" data-live-search="true" onchange="updateSelect2(this.value)">
    @foreach (var series in Model)
    {
        <option value="@series.SeriesID">@series.Series_Title</option>
    }
</select>

<!-- 第二个下拉选：先留空或显示提示 -->
<select id="Select2" size="10" name="SeasonID" class="form-control">
    <option value="">请先选择系列</option>
</select>

<!-- 把Model中的季节数据序列化到JS变量，供前端筛选 -->
<script>
    const allSeasons = @Html.Raw(Json.Serialize(Model.SelectMany(s => s.Seasons)));
</script>

第二步：编写JavaScript联动函数 #

接下来写updateSelect2函数，拿到选中的SeriesID后，筛选对应季节并更新Select2的选项：

function updateSelect2(selectedSeriesId) {
    const select2 = document.getElementById('Select2');
    // 清空现有选项
    select2.innerHTML = '';

    // 筛选出对应SeriesID的季节数据
    const filteredSeasons = allSeasons.filter(season => season.SeriesID == selectedSeriesId);

    // 处理无数据的情况
    if (filteredSeasons.length === 0) {
        const emptyOption = document.createElement('option');
        emptyOption.value = '';
        emptyOption.textContent = '该系列暂无季节数据';
        select2.appendChild(emptyOption);
        return;
    }

    // 把筛选后的季节添加到Select2
    filteredSeasons.forEach(season => {
        const option = document.createElement('option');
        option.value = season.SeasonID;
        option.textContent = season.Name;
        select2.appendChild(option);
    });
}

可选：页面加载时初始化Select2 #

如果希望页面刚加载时，Select2默认显示第一个选中系列的季节，可以加个初始化逻辑：

// 页面加载完成后自动触发一次联动
window.addEventListener('load', function() {
    const select1 = document.getElementById('Select1');
    if (select1.value) {
        updateSelect2(select1.value);
    }
});

为什么这么改？ #

原来的代码硬编码了163，只能显示固定系列的季节。现在通过前端JS监听选中事件，动态筛选数据，实现了实时联动。而且把数据提前序列化到前端，不用每次发AJAX请求，对于一般数据量来说简单又高效。如果你的数据量极大或者需要实时从后端拉取最新数据，也可以改成AJAX请求的方式，但上面的方案足够覆盖大部分场景。

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