两个联动提交表单的重置问题：jQuery仅生效第一个控件

问题根源 #

你的代码里第一个select执行.trigger('change')时，会触发它的onchange事件，进而执行this.form.submit()提交表单——页面会立即刷新，导致第二个select的重置代码根本没机会运行，所以只有第一个生效。

另外你的HTML存在语法错误：两个select标签都未闭合，clean按钮的<a>标签也没写完（缺少</a>），这些会导致DOM解析异常，先修复这些基础问题。

修复方案 #

根据需求，提供两种可行方案：

方案1：先重置所有控件，再统一提交表单

如果重置后需要提交表单，不需要逐个触发change，直接设置值后统一提交即可：

修正后的HTML：

<form action="xxxx.php" method="post">
   <select name="first" onchange="this.form.submit()">
     <option>1</option>
     <option>2</option>
     <option>3</option>
   </select>
</form>
<form action="xxxx.php" method="post">
   <select name="two" onchange="this.form.submit()">
     <option>A</option>
     <option>B</option>
     <option>C</option>
   </select>
</form>
<a href="#" id="clean" class="btn btn-transparent"><span>Clean</span></a>

对应的jQuery代码：

$("#clean").click(function (e) {
    e.preventDefault(); // 阻止a标签的默认锚点跳转
    // 直接重置两个select的默认值，不触发change事件
    $('select[name="first"]').val("1");
    $('select[name="two"]').val("A");
    // 统一提交表单（这里选择提交第一个表单，可根据需求调整）
    $('form:first').submit();
});

方案2：控制change事件的提交行为

如果必须保留trigger('change')的逻辑，可以给select添加状态标记，重置时跳过自动提交，完成后再统一处理：

HTML修改（给select的onchange添加判断）：

<form action="xxxx.php" method="post">
   <select name="first" onchange="if(!$(this).data('isResetting')) this.form.submit()">
     <option>1</option>
     <option>2</option>
     <option>3</option>
   </select>
</form>
<form action="xxxx.php" method="post">
   <select name="two" onchange="if(!$(this).data('isResetting')) this.form.submit()">
     <option>A</option>
     <option>B</option>
     <option>C</option>
   </select>
</form>
<a href="#" id="clean" class="btn btn-transparent"><span>Clean</span></a>

jQuery代码：

$("#clean").click(function (e) {
    e.preventDefault();
    // 标记当前为重置状态，阻止onchange触发表单提交
    $('select').data('isResetting', true);
    
    // 重置值并触发change（此时onchange会跳过提交）
    $('select[name="first"]').val("1").trigger('change');
    $('select[name="two"]').val("A").trigger('change');
    
    // 移除重置标记，恢复正常提交逻辑
    $('select').data('isResetting', false);
    
    // 最后统一提交表单
    $('form:first').submit();
});

补充说明 #

如果你的需求只是重置控件显示，不需要提交表单，直接去掉submit()调用即可，只保留设置val的代码。

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