kostenloser Webspace werbefrei: lima-city

onclick - Browser reload

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   g*******r

   10:39, 5.5.2016

   Guten Tag zusammen,
   
   ich habe folgende Herausforderung zu meistern, bin allerdings in Java-Script nicht sonderlich bewandert und weiss hier nicht weiter.
   
   Ziel - bei Auswahl einer bestimmten <option> innerhalb eines <select> Auswahlmenüs sollen weitere Angabemöglichkeiten erscheinen und diese auch bei Reload bestehen bleiben.
   
   Aktueller HTML Code
   

   <select>
   								<option disabled selected hidden>Bitte wähle</option>
   								<option onclick="hide_elements('select-date','select-period')">sofort</option>
   								<option onclick="show_elements('select-date');hide_elements('select-period')">Zeitpunkt</option>
   								<option onclick="show_elements('select-date','select-period')">Zeitraum</option>
   							</select>
   							<div id="select-date">
   								<select>
   									<option>01</option>
   									<option>02</option>
   								</select>
   								<select>
   									<option>Januar</option>
   									<option>Februar</option>
   								</select>
   								<select>
   									<option>2016</option>
   									<option>2017</option>
   								</select>
   							</div>
   							<div id="select-period">
   								<span class="space-margin">bis</span>
   								<select>
   									<option>01</option>
   									<option>02</option>
   								</select>
   								<select>
   									<option>Januar</option>
   									<option>Februar</option>
   								</select>
   								<select>
   									<option>2016</option>
   									<option>2017</option>
   								</select>

   
   
   Aktueller CSS Code
   
   

   #select-date, #select-period {
   	display: none;
   }

   
   
   Aktuelles JavaScript
   
   

   <script type="text/javascript">
   			function show_elements()
   			{
   				var elementNames = show_elements.arguments;
   				for (var i=0; i<elementNames.length; i++)
   				{
   					var elementName = elementNames[i];
   					document.getElementById(elementName).style.display='inline-block';
   				}
   			}
   			function hide_elements()
   			{
   				var elementNames = hide_elements.arguments;
   				for (var i=0; i<elementNames.length; i++)
   				{
   					var elementName = elementNames[i];
   					document.getElementById(elementName).style.display='none';
   				}
   			}
   		</script>

   
   
   Das ganze klappt bislang auch wunderbar und wie ich es bezwecken wollte, allerdings bleibt die Auswahl des <select> Menüs bei einem Page Reload durch den Browser erhalten, die zusätzlich angezeigten Container jedoch nicht. Was kann man hier machen um auch diese den Reload überstehen zu lassen?
   
   Ich danke schoneinmal für eure Hilfe!
   
   Sonnige Grüße aus Hamburg
   
   
   EDIT: Es ist mir aufgefallen, dass Chrome bei <select> Menüs die onclick Funktion garnicht unterstützt. GIbt es sonst eine Alternative die in allen Browsern gut läuft und auch gegenüber Browser Reloads beständig ist?
   
   EDIT2: Was ich mich auch noch frage - ich habe eine Monats und Tagesauswahl, wie kann ich, entsprechend des Monats, die passende Tageszahl ausgeben lassen?
   
   Beitrag zuletzt geändert: 5.5.2016 12:19:49 von gamegazer

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. mpcity

   mpcity hat kostenlosen Webspace.

   8:16, 12.6.2016

   Also ich weiß zwar nicht ganz, wie ich das mit dem Stehenbleiben machen würde, aber du könntest
   
   a) Cookies setzen (is aber wahrscheinlich zu kompliziert)
   
   oder b) per GET das "abspeichern"
   
   D.h. alles, was gemacht wird, in der URL zu vermerken.
   Wenn z.B. Option 1 gewählt wird, heißt die URL deineSeite.html?Option=1
   
   Und das wird dann beim Start wieder ausgelesen. Hier noch ein Script zum Auslesen:
   http://www.onlineaspect.com/2009/06/10/reading-get-variables-with-javascript/
   
   Beitrag zuletzt geändert: 12.6.2016 8:16:44 von mpcity

4. g****e

   12:59, 12.6.2016

   Ohoh... Daten werden niemals mittels GET irgendwo gespeichert, bitte immer POST oder PUT nutzen.
   Des zweite ist: Cookies werden bei jedem Request mit geschickt, das ist super ineffizient, weil es leere Daten für das Backend sind.
   
   Ein Select Field hat ein onchange Event, welches für Änderungen verwendet werden kann.
   
   Du kannst für eine Session-Persitierung den SessionStorage verwenden. Dieser ist seit vielen Browsergenerationen unterstützt, und bietet eine Key->Value Database, wie du sie vermutlich brauchst. Die Daten werden so lange Gehalten, wie der Tab offen ist, also über F5 hinweg, bis der Tab geschlossen wird. Wird der Tab geschlossen, wird alles gelöscht.
   
   Hier kannst du beim öffnen der Seite also prüfen, ob ein vorheriger Zustand vorhanden ist, und diesen entsprechend wieder herstellen. Sollte kein Zustand vorhanden sein, kannst du diesen Anlegen, und mittels onChange dann pflegen.
   
   Eine Selektion im Select-Field wird von manchen Browsern über ein F5 hinweg gespeichert, aber das ist keine gute Idee.. Setze lieber auf den Session-Storage, der ist denke ich das sinnvollste.
5. Autor dieses Themas

   g*******r

   17:56, 12.6.2016

   Vielen Dank für die Antworten. Ich werde es mal mit der Session versuchen. Danke dafür schonmal! Sobald ich ein Ergebnis habe werde ich es hier nochmal kundtun!
   
   Gruß

6. flaregg

   flaregg hat kostenlosen Webspace.

   4:41, 17.8.2016

   <select>
   <option onclick='window.location.href=""'>1</option>
   </select>

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?