MVC中如何让多个DropDownListFor匹配第一个下拉框的动态宽度

解决方案 #

推荐两种可行方案，优先选纯CSS方案，无需脚本逻辑更稳定。

方案1：纯CSS适配（推荐） #

利用CSS Grid布局自动对齐列宽，无需额外脚本：

1. 先给外层表单容器加自定义类，修改原代码第一行：

<div class="form-horizontal my-5 uniform-dropdown-form">

2. 给所有下拉框统一加自定义类sync-width-dropdown，示例如下（所有DropDownListFor都要加，包括disabled分支和正常分支，已有其他属性的用逗号分隔即可）：

// 第一个下拉框示例
@Html.DropDownListFor(model => model.ContractYearId, Model.ContractYearSelectionList, new { disabled = "disabled", @class = "sync-width-dropdown" })
// 带onchange事件的下拉框示例
@Html.DropDownListFor(model => model.YearTypeId, Model.YearTypeSelectionList, new { onchange = "changeReviewFrequency(event);", @class = "sync-width-dropdown" })

3. 加入以下CSS样式：

.uniform-dropdown-form .form-group {
  display: contents;
}
.uniform-dropdown-form {
  display: grid;
  /* 三列分别对应label、下拉框容器、右侧留白/说明区，第二列宽度自动匹配最宽内容（即第一个下拉框的宽度） */
  grid-template-columns: minmax(0, 25%) minmax(0, max-content) minmax(0, auto);
  gap: 15px;
  width: 100%;
}
.uniform-dropdown-form .sync-width-dropdown {
  width: 100%;
  box-sizing: border-box;
  min-width: unset;
}
/* 适配小屏幕响应式，小于768px时恢复默认堆叠布局 */
@media (max-width: 767px) {
  .uniform-dropdown-form {
    grid-template-columns: 1fr;
  }
  .uniform-dropdown-form .form-group {
    display: block;
  }
}

方案2：JS动态同步 #

如果CSS布局调整有冲突，可以用JS动态获取第一个下拉框宽度赋值给其他下拉框：

1. 同上给所有下拉框加sync-width-dropdown类，额外给第一个下拉框加reference-dropdown类：

@Html.DropDownListFor(model => model.ContractYearId, Model.ContractYearSelectionList, new { @class = "reference-dropdown sync-width-dropdown" })

2. 加入以下JS代码（项目依赖jQuery的前提下，Bootstrap默认自带jQuery）：

$(function() {
  // 页面加载、窗口 resize、第一个下拉框选项变更时都触发同步
  const syncEvents = 'load resize change';
  $(window).on(syncEvents, syncDropdownWidth);
  $('.reference-dropdown').on('change', syncDropdownWidth);

  function syncDropdownWidth() {
    const maxWidth = $('.reference-dropdown').outerWidth();
    $('.sync-width-dropdown').outerWidth(maxWidth);
  }
})

两种方案都可以保证下拉框宽度完全匹配第一个最长内容的下拉框，可根据项目实际情况选择。

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