页面刷新后恢复下拉选择器状态及实现自动提交需求

1. 实现自动提交 #

首先要确保所有表单元素被<form>标签包裹，再在getstate函数里正确触发表单提交：

• 用<form>标签包裹下拉框、文本框等元素
• 修正提交函数的写法，使用标准的document.getElementById获取表单并提交

2. 页面刷新后保留下拉选中状态 #

直接利用后端获取的statename值，在渲染<option>时动态添加selected属性，这种方式比sessionStorage更适配JSP后端渲染的场景。

修改后的完整代码 #

<%
String statename = request.getParameter("statename");
// 首次加载页面时默认选中All选项
if (statename == null || statename.isEmpty()) {
    statename = "111";
}
%>

<script>
function getstate() {
    // 同步文本框与下拉框的值
    document.getElementById("srt").value = document.getElementById("State").value;
    // 自动提交表单
    document.getElementById("logform").submit();
}
</script>

<form id="logform" method="get" action="">
    <select id="State" onchange="getstate()">
        <option value="111" <%= "111".equals(statename) ? "selected" : "" %>>All</option>
        <option value="228" <%= "228".equals(statename) ? "selected" : "" %>>Move</option>
        <option value="212" <%= "212".equals(statename) ? "selected" : "" %>>Clean</option>
        <option value="196" <%= "196".equals(statename) ? "selected" : "" %>>Cleaning</option>
        <option value="180" <%= "180".equals(statename) ? "selected" : "" %>>Ready</option>
        <option value="164" <%= "164".equals(statename) ? "selected" : "" %>>Occupied</option>
    </select><br><br>
    
    TextBox1<br>
    <input type="text" id="srt" name="statename" value="<%=statename%>" placeholder="get state value"><br>
    <!-- 移除手动提交按钮 -->
</form>

<%
System.out.println("the value of statename is   " + statename);
%>

关键改动说明 #

• 自动提交部分：

  • 新增<form>标签并设置id="logform"，确保所有表单元素都在表单范围内
  • 将getElemRefs替换为标准的document.getElementById("logform").submit()，实现下拉框改变时自动提交
  • 移除了原有的手动提交按钮

• 保留选中状态部分：

  • 后端初始化statename时，判断如果值为空或null，就设置为默认的"111"（对应All选项）
  • 每个<option>标签添加JSP判断逻辑：<%= "xxx".equals(statename) ? "selected" : "" %>，当选项值与statename匹配时，自动添加selected属性，页面加载时就会选中对应的选项

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