如何重置DropDownListFor选中值为默认选项“All tests”

我来帮你解决这个问题~ 要把DropDownListFor的选中状态重置回默认的「All tests」，分前端和后端两种场景来处理，看你需求来选：

一、前端JavaScript处理（无需页面回发） #

如果希望在用户关闭下拉列表（比如点击页面其他区域）后，再次打开时自动回到默认选项，或者通过按钮触发重置，可以用JS直接操作DOM：

1. 监听下拉框失去焦点事件自动重置 #

当用户选择选项后点击别处，下拉框失去焦点时自动重置为默认选项，代码如下：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取下拉框元素（ID默认是模型属性名"test"）
    const dropdown = document.getElementById('test');
    // 监听失去焦点事件
    dropdown.addEventListener('blur', function() {
        // 重置为默认选项（"All tests"对应的value是空字符串）
        this.value = '';
    });
});

2. 通过按钮触发手动重置 #

如果需要点击某个按钮来触发重置，比如添加一个重置按钮：

<button onclick="resetDropdown()">重置选项</button>

<script>
function resetDropdown() {
    document.getElementById('test').value = '';
}
</script>

3. jQuery版本（如果你项目用了jQuery） #

代码会更简洁：

$(document).ready(function() {
    // 失去焦点自动重置
    $('#test').blur(function() {
        $(this).val('');
    });

    // 或者手动触发的函数
    $('#resetBtn').click(function() {
        $('#test').val('');
    });
});

二、后端处理（页面回发后重置） #

如果是表单提交后需要把下拉框重置回默认选项，那需要在后端控制器里修改模型的属性值：

// 假设你的ViewModel叫TestViewModel
[HttpPost]
public IActionResult YourAction(TestViewModel model)
{
    // 先处理你的业务逻辑，比如表单提交的内容

    // 重置选中状态：把test属性设为空字符串
    model.test = string.Empty;
    // 重新绑定下拉框的选项列表（确保View里能正确渲染）
    model.Test = GetTestOptions(); // 这里替换成你获取选项列表的方法

    return View(model);
}

关键说明 #

你用的@Html.DropDownListFor(m => m.test, new SelectList(Model.Test, "Key", "Value"), "All tests")里，默认选项「All tests」对应的value是空字符串（""），所以不管是前端设置value = ''还是后端把model.test设为空字符串，都能让下拉框选中这个默认选项。

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