2016-07-30 5 views
1

Ich habe ein Formular mit Select-Eingabe, und ich möchte die ausgewählte Option nach dem Senden beibehalten.Retain HTML-Auswahloption in Jsp Dilemma

Bisher habe ich gefunden 2 Lösungen:

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> 

Die Frage ist, in dem man besser ist und warum . Ich bin auch daran interessiert, ob es bessere Lösungen dafür gibt.

Antwort

1

Verwenden sessionStorage Ihre Werte behalten & Stateful etwas haben:

Auf Submit:

  • speichern ausgewählte Value-Option kurz vor einreichen.

    sessionStorage.setItem('LAST_SELECTED',document.querySelectorAll('[name=form1] option[selected]')[0].value);  
    

    ;

beim Laden der Seite:

  • den Wert der zuletzt gewählte Option Get:

    var value=sessionStorage.getItem('LAST_SELECTED'); 
    

    _ Set Ausgewählte Option:

    document.querySelectorAll('[name=form1] option[value="'+value+'"]')[0].defaultSelected = true 
    

+0

In meinem Fall 'Option [ausgewählt]' Selektor wird immer geben '- wählen Sie Element -'. Es sollte durch 'option: check' ersetzt werden. Dann funktioniert es. – tarashypka

+1

Ihre Antwort hat mir sehr geholfen. Es scheint, dass "sessionStorage" alles auf der Client-Seite behält, daher ist es definitiv besser als meine erste Lösung (da ich bei jeder Anfrage nicht den 'ausgewählten' Parameter senden muss). Und 'querySelectorAll' entfernt die Schleife durch alle Optionen in meiner zweiten Lösung. Vielen Dank. – tarashypka

+0

Wenn es eine sinnvolle Antwort ist, bitte, Frage als gelöst! –