Selectboxauswahl Einbelendung der DIV-Box

MikeDe

Mitglied
Hallo Leute,

ich Suche eine Möglichkeit die Auswahl einer Selectbox in einem Div dazustellen.

zb. Ich habe eine Selectbox die ist gefühlt mit Daten, wenn ich dort eine Auswahl tätige soll darunter die dazugehöriger Text angezeigt werden.

Was wichtig ist die Seite soll nicht nochmals geladen werden sondern die Texte sind dann in DIV´s die mit style="display:none;" ausgeblendet sind und nach Auswahl wieder eingeblendet werden sollen.

Hat jemand sowas auf Lager? Ich bin nicht so der grosse Javascripter!
 
Hi,

folgendes Script sollte das leisten, was Du Dir vorstellst.
Code:
// Variablen zur Ermittlung des Browsers
IE = document.all && !window.opera;
DOM = document.getElementById && !IE;

var oldID = "";  // Variable zum Merken der alten ID

function showInfo(objSel){
    // Div-Objekt ermitteln
    var myObj = (IE)?document.all[objSel.value]:document.getElementById(objSel.value);

    // Falls noch kein Div eingeblendet ist
    if(oldID == ""){
        myObj.style.display = "block";  // Gewünschtes Div einblenden
        oldID = objSel.value;           // Div-ID merken
    }else{
        // Altes Div-Objekt holen
        var myOldObj = (IE)?document.all[oldID]:document.getElementById(oldID);
        myOldObj.style.display = "none";  // Altes Div ausblenden
        myObj.style.display = "block";    // Gewünschtes Div einblenden
        oldID = objSel.value;             // Div-ID merken
    }
}
Das Script bekommt das Objekt der Option übergeben, die gerade angewählt
wurde. Diese Option enthält als Wert (value) den ID-String des Div-Containers,
der eingeblendet werden soll.

Der zugehörige HTML-Code könnte beispielsweise wie folgt aussehen:
Code:
<select onchange="showInfo(this)" name="" size="3">
  <option value="ID1">eins</option>
  <option value="ID2">zwei</option>
  <option value="ID3">drei</option>
</select>
<div id="ID1" style="display: none;">Ich bin die Info zu "eins"</div>
<div id="ID2" style="display: none;">Ich bin die Info zu "zwei"</div>
<div id="ID3" style="display: none;">Ich bin die Info zu "drei"</div>

Ciao
Quaese
 

Neue Beiträge

Zurück