表单修改时如何实现下拉列表仅显示选中品牌（已加载全量品牌）

现有实现分析 #

你当前的代码在修改场景下（Part 2）通过LoadddlBrandByGID仅获取选中的单个品牌数据，下拉列表只会展示该选中项，确实能实现“仅显示用户所选品牌”的效果，但没有加载全部品牌数据，不符合需求中“系统会加载全部品牌数据”的要求。

优化方案 #

根据需求“加载全部品牌数据，但仅展示用户所选的品牌”，提供两种可行方案：

方案1：后端加载全量品牌，前端通过JS控制仅展示选中项 #

该方案在后端加载所有品牌数据传递给前端，前端通过JavaScript隐藏未选中的选项，既满足全量数据加载，又只展示选中项。

• 后端代码修改（Part 2）：

  // 加载全部品牌数据
  var allBrands = _iCommon.LoadddlBrand();
  // 创建SelectList并设置选中值
  ViewData["ddlBrand"] = new SelectList(allBrands, "GID", "Name", vm.BrandGID);
  return PartialView("_Edit", vm);
  

• 前端视图修改：

  <div class="form-group row">
      <label asp-for="BrandGID" class="col-sm-3 col-form-label"></label>
      <div class="col-sm-9">
          <select asp-for="BrandGID" asp-items="@ViewBag.ddlBrand" id="BrandGID" class="form-control" style="width:100%;">
              <option disabled>--- SELECT ---</option>
          </select>
          <span asp-validation-for="BrandGID" class="text-danger"></span>
      </div>
  </div>
  
  <script>
      document.addEventListener('DOMContentLoaded', function() {
          const brandSelect = document.getElementById('BrandGID');
          const selectedVal = brandSelect.value;
          
          // 遍历选项，隐藏未选中的非禁用选项
          Array.from(brandSelect.options).forEach(opt => {
              if (opt.value !== selectedVal && !opt.disabled) {
                  opt.style.display = 'none';
              }
          });
      });
  </script>
  

方案2：后端加载全量品牌后筛选选中项传递给前端 #

该方案在后端完成全量品牌加载，然后仅筛选出用户选中的品牌传递给前端，既满足服务器端加载全量数据，前端也只展示选中项。

• 后端代码修改（Part 2）：

  // 加载全部品牌数据
  var allBrands = _iCommon.LoadddlBrand();
  // 筛选出用户选中的品牌
  var selectedBrandList = allBrands.Where(b => b.GID == vm.BrandGID).ToList();
  // 创建SelectList
  ViewData["ddlBrand"] = new SelectList(selectedBrandList, "GID", "Name", vm.BrandGID);
  return PartialView("_Edit", vm);
  

• 前端视图无需修改，保持你现有的.chtml代码即可。

方案选择建议 #

• 如果后续需要在前端基于全量品牌做交互（比如动态切换显示），优先选方案1；
• 如果仅需满足“服务器加载全量、前端仅展示选中项”的基础需求，方案2更轻量，无需前端JS逻辑。

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