【问题标题】：retain HTML select option in jsp dilemma在jsp困境中保留HTML选择选项
【发布时间】：2016-07-30 00:22:55
【问题描述】：

我有一个带有选择输入的表单，我想在提交后保留选择的选项。

到目前为止，我已经找到了 2 个解决方案：

select1.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <title>Select 1</title>
  <script>
    function submitSelected1() {
      document.form1.selected.value = document.form1.item.selectedIndex;
      document.form1.submit();
    }
    function retainSelected1(selected) {
      if (selected) document.form1.item.selectedIndex = selected;
    }
  </script>
</head>
<body onload="retainSelected1(${param.selected})">
<form name="form1" action="${pageContext.request.contextPath}/controller" method="post">
  <select name="item" onchange="submitSelected1()">
    <option selected disabled>-- select item --</option>
    <option value="1">Item1</option>
    <option value="2">Item2</option>
    <option value="3">Item3</option>
    <option value="4">Item4</option>
  </select>
  <input type="hidden" name="selected" value="">
  <button type="submit">Submit</button>
</form>
</body>
</html>

select2.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <title>Select 2</title>
  <script>
    function retainSelected2(selected) {
      document.querySelectorAll('[name=form2] option[value="' + selected + '"]')[0].defaultSelected = true;
    }
  </script>
</head>
<body onload="retainSelected2(${param.item})">
<form name="form2" action="${pageContext.request.contextPath}/controller" method="post">
  <select name="item">
    <option selected disabled>-- select item --</option>
    <option value="1">Item1</option>
    <option value="2">Item2</option>
    <option value="3">Item3</option>
    <option value="4">Item4</option>
  </select>
  <button type="submit">Submit</button>
</form>
</body>
</html>

问题是哪个更好以及为什么。我也对是否有更好的解决方案感兴趣。

【问题讨论】：

标签： javascript html jsp html-select

【解决方案1】：

使用sessionStorage 来保留你的价值观并拥有一些有状态的东西：

提交时：

在提交前保存选定的选项值。

   sessionStorage.setItem('LAST_SELECTED',document.querySelectorAll('[name=form1] option[selected]')[0].value);

;

页面加载时：

获取最后选择的选项的值：

 var value=sessionStorage.getItem('LAST_SELECTED');

_ 设置选定选项：

document.querySelectorAll('[name=form1] option[value="'+value+'"]')[0].defaultSelected = true

【讨论】：

在我的情况下，option[selected] 选择器将始终给出-- select item --。它应该替换为option:check。然后就可以了。
您的回答对我帮助很大。似乎sessionStorage 会将所有内容都保留在客户端，因此它绝对比我的第一个解决方案更好（因为我不需要在每个请求中发送selected 参数）。 querySelectorAll 在我的第二个解决方案中删除了遍历所有选项的循环。谢谢。
如果它是一个有用的答案，请提出问题！