• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div Inhalt per DropDown ändern.

Status
Für weitere Antworten geschlossen.
D

DD-Stylz

Neues Mitglied
Abend ;)
Ich kann leider kein JS weil ich eigentlich es garnicht brauche bzw selten und dass was ich dann brauche kriege ich hin nur leider komme ich hier nicht weiter, bzw habe ich keine Ahnung was ich machen muss.


Also ich habe ein DropDown Feld und drunter eine Div Box, jetzt möchte ich den Inhalt der DivBox zur Auswahl des DropDowns anzeigen.

Hat jemand vllt ein Link zu einem Tutorial wo sowas gezeigt wird oder zufällig einen Codeschnipsel?

vielen dank schon mal ;)
 
crash schrieb:
ungefähr so:
Code: 
<select onchange="document.getElementById('thediv').firstChild.nodeValue = this.value">
Zum Vergrößern anklicken....
ok

sowas habe ich schon mal bereits in google gefunden nur weiß ich jetzt nicht wo ist die Inhalte der einzelnen Elemente hinschreiben soll.

Also dein Code umgesetzte würde ja so aussehen, nur wo schreibe ich den Inhalt für element1.1, element1.2, element2.1 usw....:
zb. hat element1.1 ganz anderen Inhalt als element1.2
Code: 
<select name=\"group\ " onchange="document.getElementById('inhalt').firstChild.nodeValue = this.value">
                  <optgroup label=\"gruppe 1\">
                    <option>element1.1</option>
                    <option>element1.2</option>
                  </optgroup>
                  <optgroup label=\"Gruppe2\">
                    <option>element2.1</option>
                    <option>element2.1</option>

                  </optgroup>
 </select>
<div id='inhalt'>
</div>
die Inhalte sind meistens weiter Inputfelder und textareas.
 
Inhalt? Er nimmt den Wert des Selects. Ansonsten musst du dir ein Array bauen:

Code: 
var inhalte = [
    "<p>Test</p>",
    "<p>Test2</p>",
    "<p>Test3</p>"
];
var div = document.getElementById("dasdiv");
var select = document.getElementById("dasselect");
select.onchange = function () {
    div.innerHTML = inhalte[this.selectedIndex];
}
Das ganze muss bei onload passieren.
 
crash schrieb:
Inhalt? Er nimmt den Wert des Selects. Ansonsten musst du dir ein Array bauen:

Code: 
var inhalte = [
    "<p>Test</p>",
    "<p>Test2</p>",
    "<p>Test3</p>"
];
var div = document.getElementById("dasdiv");
var select = document.getElementById("dasselect");
select.onchange = function () {
    div.innerHTML = inhalte[this.selectedIndex];
}
Das ganze muss bei onload passieren.
Zum Vergrößern anklicken....


also so ? sorry habe mich nei mit JS ausennander ebschäftigt, momentan fehlt mir auch leiderdie Zeit dafür. nur brauche ich es jetzt halt.
Code: 
<script>
var inhalte = [

    "<p>inhalt von element1.1</p>",
    "<p>inhalt von element 1.2</p>",
    "<p>inhalt von element2.1</p>",
    "<p>inhalt von element2.2</p>"

];

var div = document.getElementById("outpup");

var select = document.getElementById("group");

select.onchange = function () {

    div.innerHTML = inhalte[this.selectedIndex];

}
</script>
<select name=\"group\">
                  <optgroup label=\"gruppe 1\">
                    <option>element1.1</option>
                    <option>element1.2</option>
                  </optgroup>
                  <optgroup label=\"Gruppe2\">
                    <option>element2.1</option>
                    <option>element2.1</option>

                  </optgroup>
 </select>
<div id='outpup'>
</div>
 
Code: 
<script>
window.onload = function()
{
    var inhalte = [
        '<p>inhalt von element 1.1</p>',
        '<p>inhalt von element 1.2</p>',
        '<p>inhalt von element 2.1</p>',
        '<p>inhalt von element 2.2</p>'
    ];
    var div    = document.getElementById('outpup');
    var select = document.getElementById('group');

    select.onchange = function()
    {
        div.innerHTML = inhalte[this.selectedIndex];
    }

    select.onchange();
}
</script>

<select id="group">
    <optgroup label="Gruppe 1">
        <option>element 1.1</option>
        <option>element 1.2</option>
    </optgroup>
    <optgroup label="Gruppe 2">
        <option>element 2.1</option>
        <option>element 2.2</option>
    </optgroup>
</select>
<div id="outpup"></div>
 
Da würde ich mal die Aussagen aus dem Ausgansposting relativieren
DD-Stylz schrieb:
Ich kann leider kein JS weil ich eigentlich es garnicht brauche bzw selten und dass was ich dann brauche kriege ich hin ....

....Hat jemand vllt ein Link zu einem Tutorial wo sowas gezeigt wird oder zufällig einen Codeschnipsel?
Zum Vergrößern anklicken....
Ich frag mich was er hinkriegt und "codeschnispsel" wurden hier mehrere gezeigt.

DD-Stylz hätte auch gleich sagen können: "ey, schreibt mir mal ein Skript, ich kann es nicht"
 
@ thx, funktioniert

nur gibts da 2 Sachen

1 Habe ich einen JavScript für meinen Header der Seite(SlideShow) welches auch bei window.onload passiert und auch function() heißt, deshalb wird meien Slideshow nicht mehr geladen wenn Ich dieses Script drine habe, kann man nicht die funktion umbenennen? (erfolglos versucht)

2. Kann ich in die Variable nur sachen (html code enthalten) in die Variablen speichern wenn alles in einer zeile ist, warum?
 
kann es sein das man für window.onload nur eine function verwenden kann, denn ich habe
die Sideshow von dieser Seite Slideshow

bei mir als Header, und wenn ich die beiden drinen habe funktioniert nur das mit dem wechseln von Divinhalt.
 
Ja onload kann man nur einmal setzen. Und weil man es sonst umständlich umbauen muss, wurden richtige Events erfunden (addEventListener).
 
crash schrieb:
Ja onload kann man nur einmal setzen. Und weil man es sonst umständlich umbauen muss, wurden richtige Events erfunden (addEventListener).
Zum Vergrößern anklicken....


vielen Dank ;)

habe bei der header Slideshow

Code: 
windows.onload = init_slideshow;

durch

window.addEventListener("load", init_slideshow, false);

ersetzt

nochmals, danke klapt alles wunderbar.
 
hmm wenn ich das reinsetzte, wirds bei keinem der Browser angezeigt.


PS: IE sollte verboten, verbrannt, aus der menschlichen Geschichte ausgelöscht werden -.-°
 
Hast du dir auch die addEvent.js vom angegebenen Link in deine Seite eingefügt? Die definiert die entsprechende Funktion.
 
Der addEvent-Befehl ist benutzerdefiniert, muss also vor Verwendung erst in die Seite eingebunden werden (Datei muss natürlich entsprechend im Verzeichnis liegen).

Code: 
<script type="text/javascript" src="addEvent.js"></script>

Hast du das gemacht? Falls nein: Steht alles auf der von crash verlinkten Seite erklärt.
 
mermshaus schrieb:
Der addEvent-Befehl ist benutzerdefiniert, muss also vor Verwendung erst in die Seite eingebunden werden (Datei muss natürlich entsprechend im Verzeichnis liegen).

Code: 
<script type="text/javascript" src="addEvent.js"></script>
Hast du das gemacht? Falls nein: Steht alles auf der von crash verlinkten Seite erklärt.
Zum Vergrößern anklicken....

asööö das meinste jo, ich habs die ganze zeit so.

ich habe eine headershow.js da ist die Slideshow drinne.

die headershow.js habe ich wiefolgt in meine Seite eingebunden.

<script type="text/javascript" src="headershow.js"></script>

und in der headershow.js ist meine slideshow und am Ende


addEvent(window, "load", init_slideshow);

mit

window.addEventListener("load", init_slideshow, false);

hat es funktionier, nur beim IE halt net.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben