如何用JavaScript点击Clear按钮将下拉选框重置为默认选项

直接调整按钮的点击事件绑定，并编写对应的JavaScript函数就能实现需求：

修改后的完整代码 #

<select asp-for="ProductFilter.BrandId"
    asp-items="@(new SelectList(Model.ProductFilter.Brands,"Id","Name"))">
    <option>Chose one</option>
</select>
<button type="button" onclick="clearBrandDropdown()" class="btn btn-outline-info mt-3">Clear</button>

<script>
function clearBrandDropdown() {
    // ASP.NET Core Tag Helper会将asp-for属性转换为id为"ProductFilter_BrandId"的元素
    const brandSelect = document.getElementById("ProductFilter_BrandId");
    // 将选中项恢复为第一个选项（即"Chose one"）
    brandSelect.selectedIndex = 0;
}
</script>

补充说明 #

• selectedIndex = 0是最直接的方式，因为你设置的“Chose one”是下拉框的第一个option，直接选中索引为0的项即可恢复默认状态。
• 如果你的默认option额外设置了value=""，也可以用brandSelect.value = ""达到同样效果，两种方式都稳定可用。

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