下拉框Change提交时重置第二个Dropdown值失效问题求助

问题根源 #

1. <select>元素不支持onsubmit事件，你给第一个下拉框添加的onsubmit="this.form.reset();"完全无效。
2. 你定义的reset()函数从未被触发，第二个下拉框的值根本没被重置就随表单提交了。
3. 直接调用this.form.submit()会立即提交表单，不会自动执行任何自定义重置逻辑。

修复方案 #

• 调整第一个下拉框的onchange事件逻辑：先执行重置操作，再提交表单。
• 给第二个下拉框添加value=""的空选项（否则$('#second').val("")找不到对应选项，无法完成重置）。
• 移除第一个下拉框上无效的onsubmit属性。

修改后的代码 #

JavaScript

function resetSecondDropdown() {
    $('#second').val("");
}

（注：将函数名改为更语义化的命名，避免和原生form.reset()方法冲突）

HTML

<!-- 第一个下拉框 -->
<select class="form-select mb-3" id="first" name="first" onchange="resetSecondDropdown(); this.form.submit();">
    <option value="1">Hello</option>
    <option value="2">World</option>
</select>

<!-- 第二个下拉框，新增空选项 -->
<select class="form-select mb-3" id="second" name="second" onchange="this.form.submit();">
    <option value="" selected disabled>请选择</option>
    <option value="1">Hello</option>
    <option value="2">World</option>
</select>

替代方案（无需新增空选项） #

如果不想添加空选项，也可以直接通过选中索引重置第二个下拉框：

function resetSecondDropdown() {
    $('#second')[0].selectedIndex = 0;
}

这样会直接选中下拉框的第一个选项，无需依赖空选项的存在。

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