如何取消ASP.NET Core下拉框中默认选中的第一个选项？

浏览器会自动选中第一个可用的<option>元素。你当前的提示选项带有disabled属性，而SelectedClient初始化为空字符串，但后端生成的SelectList中没有值为空的可选选项，因此浏览器默认选中了第一个客户端选项。

方案1：让提示选项可选并设为默认选中 #

修改前端提示选项，移除disabled属性，这样当SelectedClient为空字符串时，该选项会自动被选中，且用户可重新选择：

<div class="form-group row" style="align-items:center">
     <label class="col-form-label" style="padding-left:14px; width: 100px">Client:</label>
     <select name="ClientsSelect" asp-for="@Model.SelectedClient" class="form-control" style="width: 300px" asp-items="@Model.Clients">
          <option value="">-- Select Client --</option>
     </select>
</div>

后端代码保持不变，SelectedClient默认的空字符串会自动匹配这个值为空的提示选项。

方案2：保留提示选项禁用，用JS强制设置默认选中 #

若需保持提示选项不可选（保留disabled），可在页面加载后通过JavaScript强制将其设为选中状态：

<div class="form-group row" style="align-items:center">
     <label class="col-form-label" style="padding-left:14px; width: 100px">Client:</label>
     <select name="ClientsSelect" asp-for="@Model.SelectedClient" class="form-control" style="width: 300px" asp-items="@Model.Clients">
          <option value="" disabled>-- Select Client --</option>
     </select>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const selectElement = document.querySelector('select[name="ClientsSelect"]');
  const defaultOption = selectElement.querySelector('option[value=""][disabled]');
  if (defaultOption) {
    defaultOption.selected = true;
  }
});
</script>

方案3：后端统一构建包含提示项的SelectList #

直接在后端将提示选项加入SelectList并设置为选中状态，前端无需额外编写<option>：

后端代码 #

public SelectList Clients { get; set; }
public string SelectedClient { get; set; }

public async Task<IActionResult> OnGetAsync()
{           
    // 构建包含提示项的选项列表
    var clientOptions = new List<SelectListItem>
    {
        new SelectListItem { Text = "-- Select Client --", Value = "", Selected = true }
    };
    // 添加客户端选项
    clientOptions.AddRange(new[] {"Client 1", "Client 2"}.Select(c => 
        new SelectListItem { Text = c, Value = c }));
    
    // 初始化SelectList
    Clients = new SelectList(clientOptions, "Value", "Text");          

    return Page();
}

前端代码 #

<div class="form-group row" style="align-items:center">
     <label class="col-form-label" style="padding-left:14px; width: 100px">Client:</label>
     <select name="ClientsSelect" asp-for="@Model.SelectedClient" class="form-control" style="width: 300px" asp-items="@Model.Clients">
     </select>
</div>

若需提示项禁用，只需在创建SelectListItem时添加Disabled = true即可：

new SelectListItem { Text = "-- Select Client --", Value = "", Selected = true, Disabled = true }

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