Pädi: Ausgabetext mit HTML-IFrame ersetzen

SELF-Forum

Ausgabetext mit HTML-IFrame ersetzen

Pädi
– Informationen zu den Bewertungsregeln

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

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

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 auswahlwechsel()
{
for (loop = window.document.getElementById("auswahl_2").options.length-1; loop > 0; loop--)
{
window.document.getElementById("auswahl_2").options[loop] = null;
}
for (loop = 0; loop < optionenliste[window.document.getElementById("auswahl_1").selectedIndex].length; loop++)
{
window.document.getElementById("auswahl_2").options[loop] = new Option(optionenliste[window.document.getElementById("auswahl_1").selectedIndex][loop]);
}
window.getElementById.auswahl_2.selectedIndex = 0;
}

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>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Ausgabetext mit HTML-IFrame ersetzen

    LX
    – Informationen zu den Bewertungsregeln

    Wenn Du ohnehin JavaScript einsetzt, kannst Du anstelle eines iframes auch gleich AJAX/JSONp verwenden.

    Dazu einfach als value die jeweilige URL des Schnipsels speichern die eingebunden werden soll und bei onchange dieses Schnipsel laden und an geeigneter Stelle einbinden.

    Wenn Du nicht weißt, wie Du das machen sollst, nutze ein Toolkit wie jQuery oder frage noch mal nach (insbesondere, wenn Du zusätzlich noch etwas lernen willst, eine gute Lösung).

    Gruß, LX

    --
    RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Ausgabetext mit HTML-IFrame ersetzen

    Pädi
    – Informationen zu den Bewertungsregeln

    Hier nochmals zum Verständis. Anstatt reinen Ausgabetext sollte dort iFrames eingebunden werden: z.B. Profil.html

    Hier der abgeänderte Code:
    Vielen Dank für eure Bemühungen.

      
  
<!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>
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln