在jsp困境中保留HTMLselect选项

Question

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

到目前为止，我找到了 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>

问题是哪个更好，为什么。我也很想知道是否有更好的解决方案来完成这个。

Answer 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

在jsp困境中保留HTMLselect选项

retain HTML select option in jsp dilemma

javascript

html

jsp

html-select

提交时：

页面加载时：