Inhalt von Auswahlbox bleibt bei Reload stehen

tequito

tequito

Mitglied
Hi,

ich stehe vor einem unlösbaren Problem.

Auf meiner Seite habe ich eine Select-Box. Wenn ich einen Eintrag auswähle und dann die Seite neu lade (z.B. F5) bleibt der Inhalt der Auswahlbox dort stehen und springt nicht auf den ersten zurück.

Nach dem Auswählen blendet ich mit JavaScript mit "onchange" etwas aus. Lade ich die Seite aber neu, so bin ich zwar im richtigen Auswahlpunkt, aber die Ausblendung ist natürlich weg.

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Titel</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function wechseln() {
  if( $("#eins option:selected").attr("value") == "ein" ) {
    $("#zwei").css({ display: "block" });
  } else {
    $("#zwei").css({ display: "none" });
  }
}
// -->
</script>
</head>
<body>
  
<select name="eins" id="eins" onchange="wechseln()">
  <option value="aus">ausgeblendet</option>
  <option value="ein">eingeblendet</option>
</select>

<div id="ebene2">
  <select name="zwei" id="zwei" style="display:none;">
    <option value="ja">ja</option>
    <option value="nein">nein</option>
  </select>
</div>

</body>
</html>

Wenn man hierbei nun "eingeblendet" auswählt, erscheitn die zweite Select-Box. Lädt man nun die Seite mit den "neu laden" button des Browsers oder F5 neu, bekommt man das Problem, dass "eingeblendet" ausgewählt ist, aber die Einblendung nicht stattfindet.

Wie kann man dieses Problem lösen?
 
Hi,

hast Du schon mal versucht, die Funktion wechseln im onload-Event aufzurufen?
Code: 
window.onload = function(){ wechseln();}
Ciao
Quaese
 
Da sich IE und Opera die Auswahl von Selectboxen bei einem Reload der Seite leider nicht merken, bringt es nichts die Funktion beim laden auszuführen.

Firefox kann es. Ist mein Code falsch oder IE und Opera zu dumm?
 
Hi,

vielleicht hilft es, wenn Du über die hash-Eigenschaft eine Textmarke setzt und diese beim Aktualisieren prüfst.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Titel</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function wechseln() {
  if( $("#eins option:selected").attr("value") == "ein" ) {
    $("#zwei").css({ display: "block" });
    location.hash = "#zwei";
  } else {
    $("#zwei").css({ display: "none" });
    location.hash = "#";
  }
}

window.onload = function(){
  if(location.hash.indexOf("zwei") > -1){
    document.getElementById("eins").selectedIndex = 1;  // Option markieren
    wechseln();
  }
}
// -->
</script>
</head>
<body>
  
<select name="eins" id="eins" onchange="wechseln()">
  <option value="aus">ausgeblendet</option>
  <option value="ein">eingeblendet</option>
</select>

<div id="ebene2">
  <select name="zwei" id="zwei" style="display:none;">
    <option value="ja">ja</option>
    <option value="nein">nein</option>
  </select>
</div>

</body>
</html>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück