nicht angemeldet
Gugucks,
ich habe dein Problem schon gestern zur Kenntnis genommen, und zwar mit Schrecken, dieweil es mich in ähnlicher Weise für ein Projekt auch betreffen wird. Ich erzeuge die <option>s nicht dynamisch (jedenfalls nicht via JS) sondern zeige eine Select-Liste via Zuweisung einer css-Klasse (display:block respektive display:none) entweder an oder nicht. Der Effekt ist aber derselbe wie bei dir. Sobald es über history.back() zurückgeht, sind die Selectliste und die Userauswahl verschwunden.
Also dachte ich zunächst in meinem Sinn: Na gut, dann speichern wir eben in einem <input type="hidden"> ab, ob die Select-Liste angezeigt wurde oder nicht und im zweiten Hidden-Field wird der selectedIndex gespeichert.
Über onload im body wird eine Funktion showSelectOnload() aufgerufen, die nach den Angaben in den versteckten Feldern die Liste entweder anzeigt oder eben nicht. Wieder nix. Die Werte aus hidden-Fields bleiben genausowenig erhalten wie die select-Liste selbst.
Nächster Versuch: unsichtbare Textfelder mit display:none. Wieder nix: Wenn Textfelder display:none haben, werde sie vom Browser offenbar als hidden-Fields gehandelt und alles ist wech.
Versuch Nummer 3: unsichtbare Textfelder mit visibility:hidden und alles auf 0 Pixel setzen, was nur auf 0 Pixel zu setzen geht:
visibility:hidden;width:0px;height:0px;margin:0px;padding:0px;
border:0px;font-size:0px;
Das funktioniert im Prinzip. Nur mag der IE das mit dem 0px nicht so recht akzeptieren. Also habe ich meine pseudoHiddenFields in ein div gepackt, dass die Eigenschaft display:none hat. Der IE tut dann, was ich möchte, was eigentlich nicht ganz logisch ist: Denn wenn das DIV müßte seine Eigenschaft display:none ja auf die in ihm stehende input-Fields übertragen und dasselbe machen, wie wenn die inputs selber display:hidden hätten.
Und siehe da: Mozilla reagiert entsprechend: Wenn <input type="text" /> in div mit display:none, dann sind wieder alle Werte weg. Also einen hübschen CSS-Käfer des IE ausnutzen und die style-Eigenschaften für IE und Mozi unterschiedlich formatieren, für IE display:none, für Mozi display:block;
Anbei mal der Quältext, und die Frage an den Rest der Gemeinde, obs denn nicht was Simpleres gibt :-))
Liebe Grüße, Uschi
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Das Prob mit den dynamisch erstellten Select-Listen</title>
<style type="text/css">
/* Klasse für unsichtbare Selectliste, wird als Default im Tag eingetragen */
.invisible {display:none}
/* Klasse für sichtbare Selectliste, wird dynamisch durch die Funktionen
* showSelect und showSelectOnload zugewiesen
*/
.show {display:block}
/* Klasse zum Unsichtbarmachen von Textfeldern. Damits mit der Formatierung
* sowohl für Mozi als auch den IE klappt, müssen diese Felder in einem div
* der Klasse invisDiv stehen, vgl. unten
*/
.pseudoHidden {
visibility:hidden;
width:0px;
height:0px;
margin:0px;
padding:0px;
border:0px;
font-size:0px;
}
/*
* Klasse für ein DIV, in dem die Pseudohiddenfelder stehen. Für den IE muss dieses
* DIV display:none haben, sonst brauchen die Formularfelder nämlich Platz, obwohl
* alles Mögliche in .pseudoHidden auf 0 gesetzt ist.
* Für Mozi hingegen muß das DIV gedisplayed werden.
*/
.invisDiv {
display:none; /* Anweisung für den IE */
voice-family:""}""; /* ab hier liest der IE nicht mehr mit */
display:block; /* Anweisung für Mozi */
}
</style>
<script language="JavaScript">
/**
* @function showSelect(idSel, idKeepText)
* @Aufgabe: Zeigt auf ein bestimmtes Ereignis hin eine bis dahin versteckte
* select-Liste an und setzt zwecks Erhaltung derselben bei history.back()
* ein Pseudo-Hiddenfield auf "1".
* @Param: idSel, STRING, die id der fraglichen Selectliste
* idKeepText, STRING, id des Pseudo-Hiddenfelds
*/
function showSelect(idSel, idKeepText) {
document.getElementById(idKeepText).value = "1";
document.getElementById(idSel).className = "show";
document.getElementById("anzeigen").innerHTML = document.getElementById("keepSelect").value;
}
/**
* @function showSelectOnload(idSel,idKeepText, idSelectedText)
* @Aufgabe: Liest anhand eines Pseudo-Hiddenfields aus, ob eine bestimmte
* Selectliste angezeigt werden soll und setzt anhand eines zweiten
* Pseudo-Hiddenfields den selectedIndex.
* @Aufruf: im body onload
* @Param: idSel, STRING, die id des fraglichen select-Elements
* idKeepText, STRING, die id des Pseudo-Hiddenfields für anzeigen
* idSelText, STRING, die id des Pseudo-Hiddenfields für selectedIndex
*/
function showSelectOnload(idSel,idKeepText,idSelText) {
if(document.getElementById(idKeepText).value == "1") {
document.getElementById(idSel).className = "show";
document.getElementById(idSel).selectedIndex = document.getElementById(idSelText).value;
}
}
/**
* Setzt den selectedIndex auf den Wert eines via id übergeben Pseudo-Hiddenfields
* wird onchange im select-Element aufgerufen
* Parameter: elSel, OBJECT, die selectliste, übergeben mit this
* idText, STRING, die id des Textfeldes, in dem der Wert gespeichert werden soll
*/
function setSelectedIndex(elSel, idText) {
document.getElementById(idText).value = elSel.selectedIndex;
}
</script>
</head>
<body style="margin:0px;padding:0px" onload="showSelectOnload('mySelect','keepSelect','keepSelectedIndex')">
<select id="mySelect" class="invisible" onchange="setSelectedIndex(this,'keepSelectedIndex')">
<option>wenigstens was</option>
<option>rot</option>
<option>blau</option>
<option>grün</option>
</select>
<!-- hierhin die Pseudo-Hiddenfields, also input type="text" aber unsichtbar -->
<div class="invisDiv" style="background-color:#ffff00">
<input class="pseudoHidden" type="text" id="keepSelect" name="keepSelect" value="0" />
<input class="pseudoHidden" type="text" id="keepSelectedIndex" name="keepSelect" value="0" />
</div>
<div style="background-color:#ff0000" onclick="showSelect('mySelect','keepSelect')">Selectliste azeigen</div>
<div style="background-color:#00ffff"><a href="textarea.html">weiter</a></div>
</body>
</html>