刷新頁面后，選擇框選項保持選中狀態

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));
    });

});

刷新頁面后，選擇框選項保持選中狀態

問題描述

1 個解決方案

解決方案1
1 已采納 2015-03-27 08:49:15

刷新頁面后，選擇框選項保持選中狀態

問題描述

1 個解決方案

解決方案1 1 已采納 2015-03-27 08:49:15

解決方案1
1 已采納 2015-03-27 08:49:15