如何移除下拉框中AJAX添加的选中值并恢复默认选项

问题分析 #

你的重置功能失效主要有两个核心原因：

1. 重置按钮默认是表单提交类型，点击会触发表单提交，干扰JS逻辑执行
2. 用val("")设置空值后，下拉框找不到匹配选项，浏览器会自动生成null选项，而非选中原始默认的Volvo

修正方案 #

方案1：通过JS阻止按钮默认行为

修改重置按钮的事件监听代码，先阻止表单提交，再移除AJAX添加的选项并设置默认选中值：

$("#resetBtn").on("click", function (e) {
    // 阻止按钮默认的表单提交行为
    e.preventDefault();

    // 移除所有AJAX添加的选项（匹配data-ajax属性）
    $("#cars option[data-ajax]").remove();

    // 设置下拉框选中原始默认选项Volvo
    $("#cars").val("volvo");
});

方案2：修改按钮类型（更简洁）

直接给重置按钮添加type="button"属性，避免默认提交行为，再保留正确的重置逻辑：

<button id="resetBtn" type="button">Reset</button>

对应的JS代码可以简化为：

$("#resetBtn").on("click", function () {
    $("#cars option[data-ajax]").remove();
    $("#cars").val("volvo");
});

为什么之前的代码无效？ #

• 未阻止表单提交：按钮默认是submit类型，点击会触发表单提交，导致重置逻辑可能未执行完成就被页面刷新打断
• 设置空值错误：val("")会让下拉框无匹配选项，浏览器会自动生成null选项，而非选中你期望的Volvo
• 无需手动操作selected属性：jQuery的val()方法会自动为对应value的选项设置选中状态，无需额外处理

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