我有一个带有简单 select html 元素的 jsp 页面。 Atm，当我选择其中一个选项并单击 Wyswietl 按钮时，页面刷新，表数据刷新，但是所选选项重置为默认值...如何强制其在页面刷新后保持选中状态？
我在 stackoverflow 上找到了另一个主题的脚本，但它对我不起作用。
我的 JSP 页面添加了脚本:
<%@page import="java.util.*,tim.lab1.model.Uczen"%>
<%@page import="java.util.*,tim.lab1.model.Klasa"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradebook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"> </script>
<script type="text/javascript">
$(document).ready(function(e) {
var name = "Currency=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0)
$('#uczniowieKlasy').val(c.substring(name.length, c.length));
}
});
$('#uczniowieKlasy').change(function(e) {
var cookieVal = "Currency=" + $(this).val();
document.cookie = cookieVal;
});
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Gradebook</h1>
</div>
<ul class="nav nav-pills">
<li role="presentation"><a href="klasaPage">Zarzadzaj
klasami</a></li>
<li role="presentation"><a href="przedmiotPage">Zarzadzaj
przedmiotami</a></li>
<li role="presentation" class="active"><a href="uczenPage">Zarzadzaj
uczniami</a></li>
<li role="presentation"><a href="ocenaPage">Zarzadzaj
ocenami</a></li>
</ul>
<br> <b>Dodaj ucznia:</b>
<form method="POST" action="uczenPage">
Imie: <input type="text" name="imie" /> Nazwisko: <input type="text"
name="nazwisko" /> Klasa: <select name="idKlasa">
<%
@SuppressWarnings("unchecked")
List<Klasa> klasy = (List<Klasa>) request.getAttribute("klasy");
if (klasy != null) {
for (Klasa k : klasy) {
%>
<option value="<%=k.getId()%>"><%=k.getId()%></option>
<%
}
}
%>
</select> <input type="submit" name="action" value="Dodaj" />
</form>
<br> <b>Usun ucznia:</b>
<form method="POST" action="uczenPage">
ID: <input type="text" name="idToRemove" /> <input type="submit"
name="action" value="Usun" />
</form>
<br>
<hr>
Uczniowie klasy:
<form method="GET" action="uczenPage">
<select name="uczniowieKlasy">
<option value="wszystkie">Wszystkie</option>
<%
if (klasy != null) {
for (Klasa k : klasy) {
%>
<option value="<%=k.getId()%>"><%=k.getId()%></option>
<%
}
}
%>
</select> <input type="submit" name="action" value="Wyswietl" />
</form>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Imie</th>
<th>Nazwisko</th>
<th>ID klasy</th>
</tr>
<%
@SuppressWarnings("unchecked")
List<Uczen> uczniowie = (List<Uczen>) request
.getAttribute("uczniowie");
if (uczniowie != null) {
for (Uczen u : uczniowie) {
%>
<tr>
<td><%=u.getId()%></td>
<td><%=u.getImie()%></td>
<td><%=u.getNazwisko()%></td>
<td><%=u.getKlasa().getId()%></td>
</tr>
<%
}
}
%>
</table>
<hr>
</div>
如果我有更多选择框并且想要记住所有选择的选项怎么办？
编辑
如果我想在多个jsp页面中使用这个脚本怎么办？我需要在哪里保存 .js 文件以使其对 .jsp 页面可见？</p>
这是我的项目结构:
src
---- main
--------- java
--------- resources
--------- webapp
-------------------META-INF
-------------------WEB-INF
-------------------all of my JSP pages
最佳答案
您也可以使用 localStorage 来实现该目的。每次更改选择选项时，都会将其存储在 localStorage 中，并在页面加载时再次更新。
此方法适用于同一页面中的多个选择选项
HTML:
<body>
<select name="uczniowieKlasy">
<option value="wszystkie">Wszystkie</option>
<option value="sdfsdf">sdfsf</option>
<option value="fdfs">sdfs657f</option>
</select>
<select name="sdfsdfsf">
<option value="wszystkie">Wszystkie</option>
<option value="sdfsdf">sdfsf</option>
<option value="fdfs">323</option>
</select>
<select name="sdfsf">
<option value="gsdsf">Wszystkie</option>
<option value="sdfsdf">sdfsf</option>
<option value="fdfs">456456</option>
</select>
</body>
JS:
$(function() {
var selectOptions;
if(localStorage.getItem("selectOptions")) {
selectOptions = JSON.parse(localStorage.getItem("selectOptions"));
Object.keys(selectOptions).forEach(function(select) {
$("select[name="+select+"]").val(selectOptions[select]);
});
} else {
selectOptions = {};
}
$("select").change(function() {
var $this = $(this),
selectName = $this.attr("name");
selectOptions[selectName] = $this.val();
localStorage.setItem("selectOptions", JSON.stringify(selectOptions));
});
});
关于javascript - 页面刷新 jsp 后选择框选项保持选中状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29296210/