Ausgabetext mit HTML-IFrame ersetzen

Pädi

Hallo zusammen

Ich habe ein kleines Problem. Ich möchte gerne die Ausgabetexte mit IFrames ersetzen. Wenn ich beispielsweise in den Dropdownlisten BMW M3 auswähle, sollte anstatt der Ausgabe "Text 11" ein iFrame bzw. Html eingebunden werden. Vielen Dank für eure Unterstützung.

Hier der gesamte Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

var text_container = new Array(anzahl_kategorie);
text_container[0] = new Array("Text 0");

text_container[1] = new Array("-- Auswahl --",
"Text 13.",
"Text 14.",
"Text 15.",
"Text 16.",
"Text 17.",
"Text 18.",
"Text 19.");

text_container[2] = new Array("-- Auswahl --",
"Text 10.",
"Text 11.",
"Text 71.",
"Text 12.");

text_container[3] = new Array("-- Auswahl --",
"Text 7.",
"Text 8.",
"Text 9.",
"Text 92.");

text_container[4] = new Array("-- Auswahl --",
"Text 4.",
"Text 5.",
"Text 54.",
"Text 6.");

text_container[5] = new Array("-- Auswahl --",
"Text 1.",
"Text 2.",
"Text 28.",
"Text 3.");

var anzahl_kategorie = 7;
var optionenliste = new Array(anzahl_kategorie);
optionenliste[0] = new Array("-- Auswahl --");

optionenliste[1] = new Array("-- Auswahl --",
"A1",
"A2",
"A3",
"A4",
"A5",
"A6",
"A7");

optionenliste[2] = new Array("-- Auswahl --",
"M1",
"M3",
"X3",
"X5");

optionenliste[3] = new Array("-- Auswahl --",
"Mustang",
"Fusion",
"Mondeo",
"Fiesta");

optionenliste[4] = new Array("-- Auswahl --",
"Astra",
"Omega",
"Vectra",
"Manta");

optionenliste[5] = new Array("-- Auswahl --",
"MX5",
"MX3",
"RX5",
"RX8");

function textwechsel()
{
document.getElementById("ausgabe").innerHTML = text_container[window.document.getElementById('auswahl_1').selectedIndex][window.document.getElementById('auswahl_2').selectedIndex];
}

function set_orig()

{
window.getElementById.auswahl_1.selectedIndex = 0;
window.getElementById.auswahl_2.selectedIndex = 0;
}

window.onload = set_orig

// -->
</script>
</head>
<body>
<form>
<select id="auswahl_1" onchange="auswahlwechsel(); ">
<option>-- Auswahl --</option>
<option>Audi</option>
<option>BMW</option>
<option>Ford</option>
<option>Opel</option>
<option>Mazda</option>
</select>

<select id="auswahl_2" onchange="textwechsel();">
<option>-- Auswahl --</option>
<option></option>
<option></option>
</select>
<br />
<br />
<br />
<div id="ausgabe"></div>
</form>
</body>
</html>sigi392@hotmail.com

Pion

1. Willkommen

2. Code Tags benutzen

3. Geht das aktuelle Scriptsnippet nicht

4. Warum iframe

5. les dir appendChild bei JS durch

Pädi

Hi Pion

Vielen Dank für Deine Antwort. Ich muss vorab zugeben (hat man wahrscheinlich eh schon gemerkt ), dass ich in HTML nicht so bewandert bin.

Eigentlich ist es einfach zu erklären: Ich muss eine Profil-Suche erstellen. Die Profile sind schon eigene HTML-Files. Deshalb werden die in einem IFRAME in die Seite dann eingebunden . Auf jedenfall müssen zwei Suchkriterien vorhanden sein. Nr. 1: Welches Schuljahr? (7. Schuljahr, 8. Schuljahr etc.) und Nr. 2 (abhängig von Nr.1): Welches Fach (Deutsch, Englisch, Französch etc., je nach dem).
Dann sollte man auf einem OK-Buttom drücken und auf der rechten Seite sollte dann das entsprechende HTML geladen werden (z.B. in einem IFRAME).

Dieser Code, welcher ich publiziert habe funktioniert bei mir. Wollte es nur irgendwie veranschaulichen, was ich meine. Eigentlich ist es vom Prinzip her das Gleiche, nur erscheint dort ein Text (z.B. Text11). Anstatt Text 11 sollte dort eben das Iframe eingebunden werden.

Hoffe konnte es einigermassen verständlich beschreiben Bin leider kein Hirsch in dieser Materie
Greez

Pädi

Hier habe ich nochmals der Code. Der konnte man wirklich nicht lesen.

Code
_____________________________________________

HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script type="text/javascript" language="javascript">


function auswahlschuljahr()
{
for (loop = window.document.getElementById("auswahl_fach").options.length-1; loop > 0; loop--)
{
window.document.getElementById("auswahl_fach").options[loop] = null;
}
for (loop = 0; loop < optionenliste[window.document.getElementById('auswahl_schuljahr').selectedIndex].length; loop++)
{
window.document.getElementById("auswahl_fach").options[loop] = new Option(optionenliste[window.document.getElementById('auswahl_schuljahr').selectedIndex][loop]);
}
window.getElementById.auswahl_fach.selectedIndex = 0;
}


function auswahlfach()
{
document.getElementById("ausgabe").innerHTML = text_container[window.document.getElementById('auswahl_schuljahr').selectedIndex][window.document.getElementById('auswahl_fach').selectedIndex];
}


function set_orig()


{
window.getElementById.auswahl_schuljahr.selectedIndex = 0;
window.getElementById.auswahl_fach.selectedIndex = 0;
}


window.onload = set_orig


var anzahl_kategorie = 7;
var optionenliste = new Array(anzahl_kategorie);
optionenliste[0] = new Array("-- Auswahl --");


optionenliste[1] = new Array("-- Auswahl --",
"Deutsch",
"Mathematik",
"Englisch");


optionenliste[2] = new Array("-- Auswahl --",
"Chemie",
"Physik");


optionenliste[3] = new Array("-- Auswahl --",
"Deutsch",
"Geographie");


var text_container = new Array(anzahl_kategorie);
text_container[0] = new Array("Text 0");


text_container[1] = new Array("-- Auswahl --",
"Iframe Profil.html für Deutsch im 7. Schuljahr",
"Iframe Profil.html für Mathematik im 7. Schuljahr",
"Iframe Profil.html für Englisch im 7. Schuljahr");


text_container[2] = new Array("-- Auswahl --",
"Iframe Profil.html für Chemie im 8. Schuljahr",
"Iframe Profil.html für Physik im 8. Schuljahr");


text_container[3] = new Array("-- Auswahl --",
"Iframe Profil.html für Deutsch im 9. Schuljahr",
"Iframe Profil.html für Geographie im 9. Schuljahr");


// -->
</script>
</head>




<body>




</head>




 
  <table width="1000" border="0" cellspacing="0" cellpadding="5">
    <tr valign="top">
      <th scope="col"><div align="left">Bitte wähle das gewünschte Schuljahr aus:</div></th>
      <th width="200" rowspan="6" scope="col">&nbsp;</th>
      <th width="400" height="40" rowspan="6" scope="col"><div id="ausgabe"></div></th>
    </tr>
    <tr valign="top">
      <th scope="col"><div align="left">
        <select name="auswahl_" id="auswahl_schuljahr" onchange="auswahlschuljahr(); ">
          <option>-- Auswahl --</option>
          <option>7. Schuljahr</option>
          <option>8. Schuljahr</option>
          <option>9. Schuljahr</option>
        </select>
      </div></th>
    </tr>
    <tr valign="top">
      <th scope="col">&nbsp;</th>
    </tr>
    <tr valign="top">
      <th scope="col"><div align="left">Bitte wähle das gewünschte Fach aus:</div></th>
    </tr>
    <tr valign="top">


   <th scope="col"><form>
     <div align="left">
       <select id="auswahl_fach" onchange="auswahlfach();">
         <option>-- Auswahl --</option>
         <option></option>
         <option></option>
       </select>
     </div>
   </form>
     <div align="left"><br />
     </div></th>


      </tr>


  </table>


<p>&nbsp;</p>




</body>
</html>

Alles anzeigen

synaptic

liegen die files für den iframe auf dem gleichen server?
wenn ja lad mal bitte ne zip mit der datei hier und den iframe-files hier hoch, ich schau mir des dann aufm heimweg mal in der bahn an

Pädi

Hallo synaptic

Danke für die Antwort. Ja die Files werden auf dem gleichen Pfad liegen. Die Files sind noch gar nicht erstellt. Wollte zuerst das Gerüst vorbereiten. Aber es werden ganz normale HTML-Files sein (z.B. Profildeutsch.html). Du könntest also nur ein test.html erstellen und das versuchen irgendwie reinzubinden.

PS: Wollte das ganze zuerst mit einer Spry Master-/Detaillayout machen. Kriegte aber dort dies nicht mit den zwei dynamischen Drop-Down-Listen hin. Deshalb hab ich ein bisschen rumgesurft und diesen HTML Code gefunden. Nun sollte ich nur anstatt den Text ein Iframe einbinden können.

Ich danke dir schon im voraus für deine Unterstützung. Ich weiss nicht ob ich mit dem Code auf dem richtigen bzw. falschen Weg bin für das was ich damit machen möchte.

gruss

@Synpatic

Momentan kommt bei der Ausgabe zum Beispiel diesen Text:Iframe Profil.html für Deutsch im 7. Schuljahr. Anstatt den Text ein Iframe mit der Quelle z.B src: profildeutsch.html.

gruss

synaptic

also mit einem bissi suche hier im forum hätteste dein problem auch selber lösen können und zwar ohne iframe

hab dir dein beispiel mal geändert und gezipped

war nich viel zu tun.

Pädi

Heyy!!! Vielen vielen Dank!!!!!!!!!!!!!!!!!!!!!!!! Du warst mir echt eine grosse Hilfe und hast mir viel Arbeit erspart!!!!!

synaptic

und vor allem den iframe hab ich dir erspart.. sowas braucht man heutzutage gar net mehr.....

es ergibt übrigens sinn, wenn du dir die von extern eingebundene jquery-datei runterlädst und dir lokal verfügbar machst

Pädi

Ja danke, ich setz mich mal mit diesem Thema auseinander.

synaptic

das zauberwort ist ajax...
da feuerste einfach nen request ab, obwohl die seite bereits geladen is und javascript macht dann den rest..
(also die datei runterladen, sie in einer variablen speichern und dann per innerHTML auf der "elternseite" verfügbar machen)

Pädi

Hallo synapic

Vielleicht kannst du noch da kurz weiterhelfen.

Hab jetzt deinem Ratschlag gefolgt und habe die jquery-datei runtergeladen.

Alles klappt bisher tiptop. Nur möchte ich wenn z.B. profildeutsch.html aufgerufen wird, dass man dieses Dokument scrollen kann, da soviel Text vorhanden ist. Bei Ap-Elementen konnte ich dies eingeben und mit css so definieren. Aber wie kann " <div id="ausgabe"> " dementsprechend so definiert werden?

Vielen Dank für die Antwort

grz

synaptic

ja verpass dem div ne höhe und nen overflow:auto;

dann kannste wenn der text größer wird auch im dokument scrollen (haste dich halt nur mit dem häßlichen scrollbar mitten in der seite abzufinden und es sieht aus wie ein iframe

Pädi

achso - danke! Hat geklappt!

gruss