Dropdown Menu in Frame öffnen

jukkaw · 04.03.2023

Hallo,

habe schon gesucht und nicht das gefunden was ich suche. Ich möchte per Dropdown Menü das die Links hinter der Auswahl im Frame geöffnet werden, aber die Auswahl weiterhin zu sehen ist und nicht verschwindet.

Wer kann mir helfen? Und bitte keine Rätselraten Antworten. Danke

Viele Grüße Jukka

<!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" />
<title>Wettkampftermine  Zschopau  SSK</title>
<style type="text/css">
.style5 {
text-align: left;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
font-size: medium;
}
.style1 {
text-align: left;
}
.style4 {
font-family: Arial, Helvetica, Sans-Serif;
}
.style3 {
font-size: xx-small;
font-family: Arial, Helvetica, Sans-Serif;
}
</style>
</head>

<body>

<p class="style5">Wettkampftermine  Zschopau  SSK I - SSK II - SSK III
- SSK IV - SSK V - SSK X - SSK XIII</p>

<form>
<select onchange="location.href=this.options[this.selectedIndex].value;" name="Menu">
<option disabled="disabled" selected="">Schützenkreise</option>
<option value="https://www.ssk1-vogtland.de/ausschreibung-prot..html"target="_blank">SSK I</option>
<option>SSK II</option>
<option>SSK III</option>
<option>SSK IV</option>
<option>SSK V</option>
<option>SSK X</option>
<option>SSK XIII</option>
</select>
</form>
<p class="style1"><span class="style4">Hier finden Sie Termine für Wettkämpfe der verschiedenen
<strong>S</strong>port<strong>S</strong>chützen<strong>K</strong>reise
</span>
<span class="style3">(Vollständigkeit und Inhalte der einzelnen Kreise obliegt
den verantwortlichen der jeweiligen Webseite)</span></p>

</body>

</html>

Sempervivum · 04.03.2023

Hallo @jukkaw und willkommen im Forum!

Lasse das Javascript im select-Tag weg:

Code:

<select id="select-termine">

Füge den iFrame im HTML ein, dort wo die Website angezeigt werden soll:

Code:

<iframe id="iframe-termine"></iframe>

Füge vor dem schließenden </body> dieses Javascipt ein:

Code:

<script>
    document.getElementById('select-termine').addEventListener('change', event => {
        // Unter event.target finden wir das select, das geändert wurde
        // und unter "value" die URL, die im iFrame angezeigt werden soll.
        const url = event.target.value;
        document.getElementById('iframe-termine').src = url;
    });
</script>

(ungetestet)
Ich hoffe, Du kannst das ohne Rätselraten umsetzen. Wenn nicht, dann frage nach.

BTW:

Dein Doctype ist veraltet, ersetze dies:

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

durch dies:

Code:

<!doctype html>

Verwende beim Posten von Code besser Codetags, das Menüsymbol rechts von dem Landschaftssymbol und dann </>.

Dropdown Menu in Frame öffnen

jukkaw

New member

Sempervivum

Well-known member

Dropdown Menu in Frame öffnen