Question

我有一个简单的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

Answer 1

<强> DEMO

您也可以使用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));
    });

});

页面刷新jsp后选择Box选项保持选中状态

1 个答案: