在jsp困境中保留HTMLselect选项
retain HTML select option in jsp dilemma
我有一个带有 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>
问题是哪个更好,为什么。我也很想知道是否有更好的解决方案来完成这个。
使用 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
我有一个带有 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>
问题是哪个更好,为什么。我也很想知道是否有更好的解决方案来完成这个。
使用 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