Selectbox选项在页面刷新jsp后保持选中状态
Selectbox option stay selected after page refresh jsp
我有一个带有简单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页面可见?
这是我的项目结构:
src
---- main
--------- java
--------- resources
--------- webapp
-------------------META-INF
-------------------WEB-INF
-------------------all of my JSP pages
DEMO
您也可以使用localStorage来实现此目的。每次更改select选项时,都将其存储在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));
});
});
相关文章:
- 使用JSP从服务器检索和显示图像
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 事件和状态
- 获取选择框的状态
- 相位器状态未捕获参考错误
- 如何更改reactjs中外部/独立组件的状态或属性
- 如何使用密码检测网络中的状态连接
- Ember.js-接口状态应该存储在哪里
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 在Angular 2中布线期间保持零部件处于活动状态
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- XMLHttpRequest未返回值-状态202
- 使用javascript反复检查用户在facebook上的登录状态
- 如何使bxslider仅在移动视图中处于活动状态
- servlet中的请求对象,而不是从jsp接收参数值
- 获取ASP.NET Ajax Timer状态
- Selectbox选项在页面刷新jsp后保持选中状态
- 如果jsp页面在3分钟内处于非活动状态,我如何在3分钟后注销它
- Struts - JSP -基于复选框状态启用/禁用按钮和文本框,使用Java Script
- 通过. jsp页面检查JavaScript的状态