切换Bootstrap后JSP按钮和选择器功能异常，点击事件失效如何修复

核心问题点 #

• 下拉框的onchange事件错误触发表单提交：改造后所有元素都被包裹在<form:form>标签内，下拉框的onchange="submit()"调用的是浏览器默认的表单提交方法，会直接把整个表单的参数提交到action指定的根路径，和原有逻辑不符，也会干扰按钮的点击逻辑。
• deleteRow方法参数不匹配：JS定义的deleteRow(index,id)需要两个参数，但JSP中调用时只传入了一个索引参数，参数缺失会导致JS执行异常，部分浏览器会直接终止后续逻辑。
• AJAX执行后未同步刷新页面列表数据：调用update/delete/create的AJAX请求成功后，仅输出了日志，没有重新加载后台最新的accountList数据，页面上的索引还是旧的。比如删除了索引为0的元素后，后台列表已经为空，但页面还是显示原来的行，再点update就会给后台传index=0，后台列表size是0，就会抛出IndexOutOfBoundsException异常。
• 参数传递逻辑与原有逻辑不符：原有逻辑提交的参数是accountList[${i.index}].xxx格式，改造后AJAX请求传的是单独的iban、index参数，和后台接口的接收逻辑不匹配，也会导致解析错误。

修复步骤 #

1. 修改下拉框的onchange逻辑 #

把select标签的onchange="submit()"改成自定义的提交逻辑，不要用默认的表单提交，切换存储类型后刷新列表：

<form:select class="form-control " data-width="100%" id="selectStorageType" name="storageType"
    path="storageType" onchange="refreshList()">

对应的JS新增refreshList方法：

function refreshList() {
    // 切换存储类型后重新加载页面，同步最新列表
    window.location.href = "${pageContext.request.contextPath}/?storageType=" + $('select[name=storageType]').val();
}

2. 修复deleteRow的传参问题 #

删除JS方法中无用的id参数即可：

function deleteRow(index) {
    // 原有逻辑保持不变
}

3. AJAX请求成功后刷新页面列表 #

所有AJAX的success回调里加上页面刷新逻辑，保证页面显示的是最新的列表数据，索引和后台同步：

// 以updateRow为例，create/delete方法同理修改
success: function(data){
    console.log("update Row successful");
    // 刷新当前页面，同步最新的列表数据
    window.location.reload();
},

4. 阻止按钮默认的表单提交行为（兼容性优化） #

在onclick事件里加上return false;，避免部分浏览器点击按钮时触发默认的表单提交：

<button onclick="updateRow(${account.id==null ? i.index:account.id});return false;" type="button">Update</button>

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