Div Inhalt per DropDown ändern.

[DD-Stylz]

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]

ungefähr so:

<select onchange="document.getElementById('thediv').firstChild.nodeValue = this.value">

 

[DD-Stylz]

ungefähr so:

<select onchange="document.getElementById('thediv').firstChild.nodeValue = this.value">

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

<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.

 

[crash]

Inhalt? Er nimmt den Wert des Selects. Ansonsten musst du dir ein Array bauen:

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.

 

[DD-Stylz]

Inhalt? Er nimmt den Wert des Selects. Ansonsten musst du dir ein Array bauen:

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.

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.

<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>

 

[crash]

Id="" ist nicht gleich name=""! Und das ganze muss bei onload passieren.

 

[DD-Stylz]

Id="" ist nicht gleich name=""! Und das ganze muss bei onload passieren.

wie meinst du es muss bei onload passieren?

 

[mermshaus]

<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>

 

[struppi]

Da würde ich mal die Aussagen aus dem Ausgansposting relativieren

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?

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"

 

[DD-Stylz]

@ 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?

 

[DD-Stylz]

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.

 

[crash]

Ja onload kann man nur einmal setzen. Und weil man es sonst umständlich umbauen muss, wurden richtige Events erfunden (addEventListener).

 

[DD-Stylz]

Ja onload kann man nur einmal setzen. Und weil man es sonst umständlich umbauen muss, wurden richtige Events erfunden (addEventListener).

vielen Dank ;)

habe bei der header Slideshow

windows.onload = init_slideshow;

durch

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

ersetzt

nochmals, danke klapt alles wunderbar.

 

[crash]

IE kennt addEventListener() nicht. :)

Benutz' am besten das: design-noir | Webentwicklung | JavaScript | addEvent & removeEvent

addEvent(window, "load", init_slideshow);

Das löst auch gleich einige Probleme mit dem IE.

 

[DD-Stylz]

hmm wenn ich das reinsetzte, wirds bei keinem der Browser angezeigt.


PS: IE sollte verboten, verbrannt, aus der menschlichen Geschichte ausgelöscht werden -.-°

 

[mermshaus]

Hast du dir auch die addEvent.js vom angegebenen Link in deine Seite eingefügt? Die definiert die entsprechende Funktion.

 

[DD-Stylz]

Sorry aber ich kapier net was du meinst.

 

[mermshaus]

Der addEvent-Befehl ist benutzerdefiniert, muss also vor Verwendung erst in die Seite eingebunden werden (Datei muss natürlich entsprechend im Verzeichnis liegen).

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

Hast du das gemacht? Falls nein: Steht alles auf der von crash verlinkten Seite erklärt.

 

[DD-Stylz]

Der addEvent-Befehl ist benutzerdefiniert, muss also vor Verwendung erst in die Seite eingebunden werden (Datei muss natürlich entsprechend im Verzeichnis liegen).

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

Hast du das gemacht? Falls nein: Steht alles auf der von crash verlinkten Seite erklärt.

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.

 

[crash]

Was sagt die Fehlerconsole?